我有6个CSS3动画，我希望其中一半向右走，另一半向左走。这可能是单独进行还是必须相同。我也可以分别更改它们的速度吗？
这是我目前拥有的
<html>
<style>
#A,#B,#C,#D,#E,#F,#G{
position:absolute;
left:-20%; /* Set initial position for each image off-screen left -- adjust according to image width */
animation:mymove 8s infinite; /* total animation time for each image is 8 seconds, loops forever */
animation-direction:normal;
/* Firefox */
-moz-animation:mymove 8s infinite;
-moz-animation-direction:normal;
/* Safari, Chrome, and Webkit Opera */
-webkit-animation:mymove 8s infinite;
-webkit-animation-direction:normal;
/* Presto Opera */
-o-animation:mymove 8s infinite;
-o-animation-direction:normal;
}
/* start each image's animation 2 seconds after the previous */
#A{
animation-delay:0s;
-webkit-animation-delay: 0s;
}
#B{
animation-delay:2s;
-webkit-animation-delay: 2s;
}
#C{
animation-delay:4s;
-webkit-animation-delay: 4s;
}
#D{
animation-delay:6s;
-webkit-animation-delay: 6s;
}
#E{
animation-delay:4s;
-webkit-animation-delay: 8s;
}
#F{
animation-delay:2s;
-webkit-animation-delay: 10s;
}
#G{
animation-delay:0s;
-webkit-animation-delay: 12s;
}
/* Animation start and stop points */
@keyframes mymove
{
from {left:-5%;} /*off-screen left (adjust for image width)*/
to {left:100%;} /*off-screen right*/
}
@-moz-keyframes mymove /* Firefox */
{
from {left:-5%;}
to {left:100%;}
}
@-webkit-keyframes mymove /* Safari, Chrome, and Webkit Opera */
{
from {left:-5%;}
to {left:100%;}
}
@-o-keyframes mymove /* Presto Opera */
{
from {left:-5%;}
to {left:100%;}
}
</style>
<div>
<img src="A.gif" id="A" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="B" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="C" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="D" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="E" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="F" alt="A"/>
<br>
<div><br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<img src="A.gif" id="G" alt="A"/>
</div>
</html>最佳答案
像这样吗
http://codepen.io/anon/pen/vxjoKo
If you want to change the speed change the value in
-moz-animation:mymove 8s infinite;
将8s更改为您想要的任何值，然后在所有其他时间都将其更改为8s，数字越小则时间越快。
另外为了将来学习将标记中的所有内容移到单独的CSS文件中
关于html - 如何使CSS3动画左右移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42981627/