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

Answer 2

您正在寻找animation-fill-mode，专门设置为forwards。

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

CSS动画跳过

2 个答案: