我有一个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;
- }
- }
