css动画延迟播放次数,CSS动画延迟和播放状态行为

如何创建5秒的关键帧动画，并确保框架相同的“百分之百”。

由于时间的动画比例是百分比，我们可以计算出100ms / 5000ms等于2％/ 100％。

div {

background:#333;

padding:10px;

width:100px;

height:100px;

color:#fff;

animation-name: animateAndPause;

animation-duration: 5s;

animation-iteration-count: infinite;

}

@keyframes animateAndPause {

0% {

-ms-transform: rotate(0deg); /* IE 9 */

-webkit-transform: rotate(0deg); /* Chrome,Safari,Opera */

transform: rotate(0deg);

}

98% {

-ms-transform: rotate(360deg); /* IE 9 */

-webkit-transform: rotate(360deg); /* Chrome,Opera */

transform: rotate(360deg);

}

100% {

-ms-transform: rotate(360deg); /* IE 9 */

-webkit-transform: rotate(360deg); /* Chrome,Opera */

transform: rotate(360deg);

}

}

为了演示的目的，jsfiddle有一个更长的暂停，500ms。