如何让 CSS 动画每 10 秒播放一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16783554/
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
how to make CSS animation to play every 10 seconds
提问by Alex Jj
I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds. Here is my code:
我有一个 css 动画，它要么无限重复，要么只重复特定次数。但我想每 5 秒播放 2 次。这是我的代码：
#countText{
-webkit-animation-name: color2;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 5s;
}
@-webkit-keyframes color2 {
0% { }
25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a}
50% { }
75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; }
100% {}
}
回答by Sourabh
You can change the keyframes to show animation twice. First from 0%to 20%and next from 20%to 40%, then let it stay like that till 100%. Now change animation-durationto 5swith no animation-delay
您可以更改关键帧以显示两次动画。首先从0%to20%和下一个 from 20%to 40%，然后让它保持原样直到100%。现在改animation-duration到5s没有animation-delay
#countText {
-webkit-animation-name: color2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
}
@-webkit-keyframes color2 {
0% {
}
5%,25% {
text-shadow: -2px -5px 10px #fb0017,
-5px 0px 10px #3a00cd,
-5px 5px 10px #00ff3a;
}
15%,35% {
text-shadow: 2px 5px 10px #fb0017,
5px 0px 10px #3a00cd,
5px -5px 10px #00ff3a;
}
40% {
text-shadow: none;
}
}
