animation关键帧动画语法

基本声明和用法

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

为了简洁起见，此页面上的其余代码将不使用任何前缀，但实际使用情况应使用上面的所有供应商前缀。

多个步骤

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}
#box {
   animation: fontbulger 2s infinite;
}

如果动画具有相同的开始和结束属性，则一种方法是用逗号分隔0%和100%值：

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

或者，你总是可以告诉动画运行两次(或任何偶数次)并告诉方向交替。

调用具有单独属性的关键帧动画：

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

动画简写

只需将所有单个值用空格隔开。顺序无关紧要，除了同时使用持续时间和延迟它们必须保持那样的顺序。在下面的示例中，1s =持续时间，2s =延迟，3 =迭代。

animation: test 1s 2s 3 alternate backwards;

结合变形和动画

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

多个动画

您可以使用逗号分隔值以在选择器上声明多个动画。

.animate-this {
   animation:
      first-animation 2s infinite,
      another-animation 1s;
}

steps()

steps()函数可精确控制在动画时间范围内将渲染多少个关键帧。假设您声明：

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

如果在动画中使用step(10)，将确保在分配的时间内仅发生10个关键帧。

.move {
  animation: move 10s steps(10) infinite alternate;
}

那里需要非常棒的数学计算。每隔一秒钟，该元素将向左移动10px，向下移动10px，直到动画结束，然后反向。

对于spritesheet动画来说，像这个通过simurai进行的演示，这可能很棒。