关键帧动画语法

基本声明和用法

@keyframes name-of-animation {
  0%    { opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}

.animate-this-element {
  animation: name-of-animation 5s infinite;
}

您可以在 @keyframe 动画中使用任意数量的“停止点”，这是关键帧动画的主要优势之一。虽然 CSS transition 只能从一个状态转换到另一个状态，但关键帧动画可以在其时间线上插值多个不同的状态。

如果动画具有相同的起始和结束属性，则可以通过逗号分隔 0% 和 100% 的值来实现。

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

或者，您始终可以指示动画运行两次（或任何偶数次），并将其方向设置为 alternate。

使用单独的属性调用关键帧动画

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

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

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

计算结果非常清晰。每秒，元素将向左移动 10px 并向下移动 10px，直到动画结束，然后再次反向无限循环。

这对于像 samurai 的这个演示 这样的精灵图动画非常有用。

浏览器支持

更多资源

• MDN 文档
• MDN：使用 CSS 动画
• Can I Use – 浏览器支持
• 视频：CSS 动画简介

旧的供应商语法

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