Question

如标题所述我试图让两个动画同步... 我会在2个小提琴中链接两个动画，这样你就可以看到它们中的每一个，我也会将一个小提琴与我奇怪的结果联系起来。

这是我连接它们的代码:(仅限chrome）

#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);
  }
}

所以你可以看到它第一次镜像它，但下次没有...... https://jsfiddle.net/j3c1rqb0/ 任何想法为什么？马铃薯面应该看起来像这样..

- ＆GT; - ＆GT; - ＆GT; - ＆GT; - ＆GT; - ＆GT; - ＆GT; - ＆GT; - ＆GT;

＆lt; - ＆lt; - ＆lt; - ＆lt; - ＆lt; - ＆lt; - ＆lt; - ＆lt; - ＆lt; - 谢谢！

Answer 1

您只需从alternate

中删除-webkit-animation:linear infinite alternate;即可

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

你在关键帧的某个地方错过了}。

看这里：https://jsfiddle.net/wsp2z5py/

这是alternative keyframe

Answer 2

我认为你需要从运行中删除50％，试试这个：

＆＃13;

#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);}
  }

＆＃13;

<div id = "pot">
<img src = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width = 100px height =100px>
</div>

＆＃13;

2个动画一起工作奇怪......？

2 个答案: