有两个轮子,一个向左滚动,一个向右滚动,我想用jquery让轮子一个一个滚动并循环,我可以用jquery写一个轮子,但我不知道怎么写它们在 jquery 动画队列中。
html:
<div id="wheel1">
<p>Running left</p>
</div>
<div id = "wheel2">
<p>Running right</p>
</div>
CSS:
#wheel1{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
float: right;
/*animation: myrotate2 3s ease-out forwards;*/
}
.roll-left{
animation: roll-left 2s ease-out forwards;
}
@keyframes roll-left{
0% {}
50% {transform: translate(-1000px) rotate(-720deg)}
100% {}
}
#wheel2{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
/*animation: myrotate1 3s ease forwards;*/
}
.roll-right{
animation: roll-right 2s ease forwards;
}
@keyframes roll-right{
0% {}
50% {transform: translate(1000px) rotate(720deg)}
100% {}
}
p{
font-size: 25px;
color: white;
margin: 30px;
}
jquery:
setInterval(function(){
$("#wheel1").addClass('roll-left').one('animationed',function(){
$("#wheel1").removeClass('roll-left');
});
},2000);
最佳答案
要循环动画,您应该使用animation-iteration-count
animation-iteration-count: infinite;
你需要调整你的动画
#wheel1{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
float: right;
/*animation: myrotate2 3s ease-out forwards;*/
}
.roll-left{
animation: roll-left 2s ease-out forwards;
animation-iteration-count: infinite;
}
@keyframes roll-left{
0% {}
25% {transform: translate(-1000px) rotate(-720deg)}
50% {transform: translate(0) rotate(0)}/*wait for the secon animation to start*/
}
#wheel2{
width: 150px;
height: 150px;
background-color: pink;
border:5px dotted purple;
border-radius: 80px;
/*animation: myrotate1 3s ease forwards;*/
}
.roll-right{
animation: roll-right 2s ease forwards;
animation-iteration-count: infinite;
}
@keyframes roll-right{
0%{}
50% {transform: translate(0) rotate(0)}/*wait for the first animation to stop*/
75% {transform: translate(1000px) rotate(720deg)}
100% {}
}
p{
font-size: 25px;
color: white;
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wheel1" class="roll-left">
<p>Running left</p>
</div>
<div id = "wheel2" class="roll-right">
<p>Running right</p>
</div>
关于jquery - css动画,只想使用setInterval使动画多次工作,但它只工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43750701/