CSS动画跳过

这是我的CSS代码：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;} 
}

而我需要的是动画，通过发挥，而无需返回到第一个关键帧上完成。

来源

2016-07-02 Alex

你不介意把它变成[代码段]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）？ – BillyNate

尝试：

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

来源

2016-07-02 14:37:10 MuFFes

这是工作，但不是我想要的，我想这样做多倍。像流利的2-3x一样的东西 – Alex

将'animation-iteration-count：3;'添加到'＃case'。它会工作。 – MuFFes

是啊，这是我想要的，我也尝试它与无限但它不流利。它看起来动画再次停止：/ – Alex

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

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

来源

2017-01-18 15:59:57

回答

相关问题