css3 анимация не применяется при использовании @keyframes

Question

Я пытаюсь анимировать div, чтобы упасть сверху. Не знаю, почему это не работает ...

<div>foobar</div> 

@keyframes slidein-low { 
    from { 
    top: 0; 
    } 
    to { 
     top: 80%; 
    } 
} 

div { 
    position: relative; 
    height: 100px; 
    border: 1px solid red; 
    animation-duration: 3s; 
    animation-name: slidein-low; 
} 

http://jsfiddle.net/MMF52/

Answer 1

Попробуйте

@keyframes slidein-low { 
     from { 
     top: 0px; 
     } 
     to { 
      top: 100px; 
     } 
    } 

    @-webkit-keyframes slidein-low /* Safari and Chrome */ 
    { 
     from { 
     top: 0px; 
     } 
     to { 
      top: 100px; 
     } 
    } 

    div { 
     height: 100px; 
     border: 1px solid red; 
     position:relative; 
     animation:slidein-low 5s infinite; 
    -webkit-animation:slidein-low 5s infinite; /* Safari and Chrome */ 
    } 

ref

Answer 2

Во-первых, использовать проценты вы должны добавить:

html,body{ 
    height:100%; 
} 

Для WebKit браузеров необходимо добавить префикс -webkit:

@-webkit-keyframes slidein-low { 
    from { 
    top: 0; 
    } 
    to { 
    top: 80%; 
    } 
} 

И анимации просто добавить нужный префикс:

animation-duration: 3s; 
animation-name: slidein-low; 
-webkit-animation-duration: 3s; 
-webkit-animation-name: slidein-low; 

JSFiddle

Просто примечание стороны, animation не будет работать в IE9 или меньше - caniuse

Answer 3

Я не уверен, что если бы это был просто недосмотр, когда вы положили на скрипке вместе, но это выглядит как будто вы только что вышли из position

Добавление любой позиции, отличной от статической (абсолютной, относительной, фиксированной), похоже, заставляет ее работать в Firefox.

Working Example

div { 
    position: relative; /* missing bit */ 
    height: 100px; 
    border: 1px solid red; 
    animation: slidein-low 3s; /* optional animation shorthand */ 
}