'@keyframes'#

关键帧 @keyframes 规则通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。和 transition 相比，keyframes 可以控制动画序列的中间步骤。

渲染实现#

安卓和 iOS 都使用 keyframes 实现动画，不同之处在于安卓动画所造成的属性改变都会真实作用到组件上，而 iOS 的 transform 部分使用 CATransform3D 来实现。

属性个数不定#

如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：

@keyframes identifier {
  0% {
    background-color: blue;
    opacity: 0;
  }
  30% {
    opacity: 0.3;
  }
  72% {
    background-color: yellow;
  }
  100% {
    opacity: 1;
    background-color: red;
  }
}

关键帧取值#

• from 等价于 0%。
• to 等价于 100%。
• <percentage> 动画序列中触发关键帧的时间点，使用百分值来表示。

支持的属性#

keyframes 动画支持的属性有: left、right、top、bottom、width、height、opacity、background-color、color、transform、max-width、min-width、max-height、min-height、padding-left、padding-right、padding-top、padding-bottom、margin-left、margin-right、margin-top、margin-bottom、border-left-width、border-right-width、border-top-width、border-bottom-width、border-left-color、border-right-color、border-top-color、border-bottom-color、flex-basis、flex-grow、filter。