我有一个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% {}
}
解决方法
您可以更改关键帧以显示动画两次.首先从0％到20％,然后从20％到40％,然后让它保持这样直到100％.现在将动画持续时间更改为5秒,没有动画延迟
#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 5px 10px #00ff3a;
}
15%,35% {
text-shadow: 2px 5px 10px #fb0017,5px -5px 10px #00ff3a;
}
40% {
text-shadow: none;
}
}
