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

Я не, если это желаемый эффект. Просто обновите соответствующим образом.