如何创建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。