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

首先，要使用百分比，您必须添加：

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 2

试试这个

 @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 3

当你把小提琴放在一起时，我不确定这只是一种疏忽，但看起来你只是遗漏了position

添加静态（绝对，相对，固定）以外的任何位置似乎都可以在Firefox中使用。

Working Example

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

使用@keyframes时不应用css3动画

3 个答案: