Css動畫多重狀態

Question

我有一個div動畫，下面是從下到上翻譯的反覆。 0px to -20px to 0px to -20px to 0px....但我想它翻譯這樣 0px to -20px to 5px to -20px to 0px to -20px to 5px to -20px to 0px

The demo is here.

HTML

<div id="main"> 
    <div id="example"></div> 
</div> 

CSS，而不是

#main{ 
    border-bottom: 1px solid black; 
} 

#example{ 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    -webkit-animation: example 0.5s linear 0s infinite alternate; 
} 

@-webkit-keyframes example { 
    from {transform:translate(0px,0px);} 
    to {transform:translate(0px,-20px);} 
} 

Answer 1

首先將動畫的語法從基於百分比的I.E.改爲基於百分比。

從::

@-webkit-keyframes example { 
    to {transform:translate(0px,0px);} 
    from {transform:translate(0px,-20px);} 
} 

爲::

@-webkit-keyframes example { 
    0% {transform:translate(0px,0px);} 
    50% {transform:translate(0px,-20px);} 
    100% {transform:translate(0px,5px);} 
} 

現在的百分比看，你可以在任何時候動畫元素，DEMOhere

Answer 2

使用percertanges從和。

DEMO

@-webkit-keyframes example { 
    0% {transform:translate(0px,-20px);} 
    25% {transform:translate(5px,-20px);} 
    50% {transform:translate(0px,-20px);} 
    75% {transform:translate(5px,-20px);} 
    100% {transform:translate(0px,0px);} 
} 

我沒有，如果這是預期的效果。相應地更新。