我有这个动画:
#button-1
{
-webkit-animation: leaf-rotation-1 1s linear 1 alternate 1.5s;
}
#button-2
{
-webkit-animation: leaf-rotation-2 1s linear 1 alternate 4s;
}
#button-3
{
-webkit-animation: leaf-rotation-3 1s linear 1 alternate 5.5s;
}
可以看到,它们分别在1.5、4和5.5s执行。好吧,当最后一个(5.5)结束时,如何重新启动第一个?
最佳答案
我想到的解决方案将要求您编写3个不同的动画,这些动画的时间安排适当,并无限循环地运行它们。
Here's a live example of the concept
因此,第一个动画的结尾率为33%,第二个动画的结尾为33%,结束于66个,最后一个动画为66-100。这无限地运行。
CSS:
@-webkit-keyframes width-1 {
0% {
width: 100px;
}
17% {
width: 500px;
}
33% {
width: 100px;
}
}
@-webkit-keyframes width-2 {
33% {
width: 100px;
}
50% {
width: 500px;
}
66% {
width: 100px;
}
}
@-webkit-keyframes width-3 {
66% {
width: 100px;
}
83% {
width: 500px;
}
100% {
width: 100px;
}
}
div {
background: red;
width: 100px;
}
#div1 {
-webkit-animation: width-1 1s infinite linear;
}
#div2 {
-webkit-animation: width-2 1s infinite linear;
}
#div3 {
-webkit-animation: width-3 1s infinite linear;
}
的HTML
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
关于animation - 如何在动画中调用“循环”?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11331352/