使用@keyframes时不应用css3动画

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 */ 
}