CODEWITHSUNDEEP
cssanimation
Furious Mountain
Furious Mountain

Reputation: 1543

2 animations working strange together...?

As described in the title im trying to make two animations sync... I will link both individual animations in 2 fiddles so you can see each of them and i will also link a fiddle to my weird result..

1st fiddle https://jsfiddle.net/oxc12av7/

2nd fiddle https://jsfiddle.net/5knf0xtr/

This is my code to connect them: (chrome only)

#pot{
  bottom:15%;
  position:absolute;
  -webkit-animation:linear infinite alternate;
  -webkit-animation-name: run, swap;
  -webkit-animation-duration: 8s;
  animation:linear infinite alternate;
  animation-name: run, swap;
  animation-duration: 8s;
}

@-webkit-keyframes run {
  0% { left: 0;}
  50%{ left : 82%;}
  100%{ left: 0;}
}

@-webkit-keyframes swap {
  0% {
    -webkit-transform: scaleX 1;
    -webkit-animation-timing-function: steps(1, end);
  }
  50% {
    -webkit-transform: scaleX(-1);
    -webkit-animation-timing-function: steps(1, end);
    100%{-webkit-transform: scaleX 1;
    -webkit-animation-timing-function: steps(1, end);
  }
}

So you can see that it works the first time to mirror it but the next time it doesn't... https://jsfiddle.net/j3c1rqb0/ any ideas why? The potatos face should be looking like this..

-> -> -> -> -> -> -> -> ->

<- <- <- <- <- <- <- <- <- Thanks!

Upvotes: 1

Views: 75

Answers (2)

Banzay
Banzay

Reputation: 9470

You just need to remove alternate from -webkit-animation:linear infinite alternate;

#pot{
bottom:15%;
position:absolute;
-webkit-animation:linear infinite;
-webkit-animation-name: run, swap;
-webkit-animation-duration: 8s;
}

and you missed } somewhere in the keyframe.

look here: https://jsfiddle.net/wsp2z5py/

And here is alternative keyframe

Upvotes: 4

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

I think you neet to remove 50% from run, try this:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run, swap;
  -webkit-animation-duration: 2s;
}

@-webkit-keyframes run {
  0% {
	left: 0;
  }
  50% {
	left: 82%;
  }
  100% {
	left: 0%;
  }
}

@-webkit-keyframes swap {
	0% {-webkit-transform: scaleX 1;
	-webkit-animation-timing-function: steps(1, end);}
	50% {-webkit-transform: scaleX(-1);
		-webkit-animation-timing-function: steps(1, end);}
	100%{-webkit-transform: scaleX 1;
	-webkit-animation-timing-function: steps(1, end);}
  }
<div id = "pot">
<img src = "https://i.sstatic.net/qgNyF.png?s=328&g=1" width = 100px height =100px>
</div>

Upvotes: 1

Related Questions