如何使css3动画左转右转
如何使css3动画左转右转
提问于 2017-03-23 16:20:23
我有6个CSS3动画，我想一半去右边，另一半去左边。这可能是分开做，还是必须是same.Also，我可以单独改变他们的速度吗？
这就是我现在所拥有的
<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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-23 16:47:53
像这样吗？
http://codepen.io/anon/pen/vxjoKo
If you want to change the speed change the value in
-moz-animation:mymove 8s infinite;将8s改为任何你想要的，然后所有其他时间它被设置，数目越小，时间越快。
另外，为了将来，请学习将标记中的所有内容移动到单独的css文件中。
Stack Overflow用户
发布于 2017-03-23 17:11:31
来试试这个
CSS
.item-container {
position: relative;
}
.left-item,
.right-item {
position: absolute;
}
.left-item {
left: -20%;
animation: left-to-right 8s infinite;
}
.right-item {
right: -20%;
animation: right-to-left 8s infinite;
}
@keyframes left-to-right {
from {
left: -20%;
}
to {
left: 120%;
}
}
@keyframes right-to-left {
from {
right: -20%;
}
to {
right: 120%;
}
}标记
<div class="item-container">
<img src="https://dummyimage.com/200x150/000/fff&text=A" id="A" alt="A" class="left-item" />
<img src="https://dummyimage.com/200x150/000/fff&text=B" id="B" alt="B" class="right-item" />
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42981627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号