这是我的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;}
}

10-07 19:58
查看更多