这是我的CSS代码:
#case {
background-position: -0px 0px;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-position: -0px 0px;}
25% {background-position: -1050px 0px;}
50% {background-position: -0px 0px;}
75% {background-position: -1050px 0px;}
100% {background-position: -1050px 0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-position: -0px 0px;}
25% {background-position: -1050px 0px;}
50% {background-position: -0px 0px;}
75% {background-position: -1050px 0px;}
100% {background-position: -1050px 0px;}
}
我需要的是动画可以播放,而不会在完成时返回到第一个关键帧。
最佳答案
尝试:
#case {
background-position: -0px 0px;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-position: -0px 0px;}
100% {background-position: -1050px 0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-position: -0px 0px;}
100% {background-position: -1050px 0px;}
}