带时间间隔的 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18812055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS animation with time interval
提问by Seong Lee
I want to rotate a graphic element infinitely but with some time interval by step.
我想无限地旋转图形元素，但要逐步旋转一些时间间隔。
For example, rotate 90 degree (smooth animation) then after 5 secs rotate another 90 degree and repeat the same infinitely.
例如，旋转 90 度（平滑动画）然后在 5 秒后旋转另一个 90 度并无限重复相同的操作。
Can this be done using only css?
这可以仅使用 css 来完成吗？
Here is my JS BIN
这是我的JS BIN
回答by Itay
Pretty simple. The following code limits the transformation to keyframes 40%-60%(one fifth of the entire duration). So, if we give 6 secondsto the entire animation, 1.2swill be used for movement and 4.8swill be used for delay. You can play with it to get more accurate numbers.
很简单。以下代码将转换限制为关键帧40%-60%（整个持续时间的五分之一）。所以，如果我们给6 seconds整个动画，1.2s将用于运动，4.8s将用于延迟。您可以使用它来获得更准确的数字。
@-webkit-keyframes rotation {
0%, 40% {-webkit-transform: rotate(0deg);}
60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
0%, 40% { transform: rotate(0deg); }
60%, 100% { transform: rotate(90deg); }
}
.wrapper a:last-child div {
-webkit-animation: rotation 6s infinite linear;
animation: rotation 6s infinite linear;
}
回答by grub
You could try something like this.
你可以尝试这样的事情。
@-webkit-keyframes rotation {
0%,10% {-webkit-transform: rotate(0deg);}
90%,100% {-webkit-transform: rotate(90deg);}
}
Though, it doesn't allow for exact timing, it could do roughly what you requested.
虽然，它不允许精确的时间，但它可以大致满足您的要求。
回答by Jakub Michálek
For regular rotation, you can use
对于定期轮换，您可以使用
@-webkit-keyframes rotation {
0% {-webkit-transform: rotate(0deg);}
12.5%, 25% {-webkit-transform: rotate(90deg);}
37.5%, 50% {-webkit-transform: rotate(180deg);}
62.5%, 75% {-webkit-transform: rotate(270deg);}
87.5%, 100% {-webkit-transform: rotate(360deg);}
}
