CSS 动画跳过

Question

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

我需要的是让动画播放完毕，而不是在完成时返回到第一个关键帧。

Answer 1

尝试:

#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;}
}