W3schools 关键帧 - CSS

CSS的关键帧（Keyframe）是指用来定义CSS动画中的关键帧的一种规则。通过在不同的关键帧位置指定 CSS 样式，可以控制元素动画的逐帧变化， 获得更为流畅的动画效果。

基本语法

@keyframes animation_name {
  from { /*开始状态*/ } 
  to { /*结束状态*/ }
}

以上是基本语法，其中必须定义关键帧动画的名字，利用开始状态from和结束状态to去描述动画效果。

使用规则

为了发挥CSS动画最大的功能，使用关键帧时我们必须知道一些规则：

1. 关键帧动画必须定义动画名称；
2. 必须定义至少一个关键帧；
3. 从关键帧之间进行过渡，使动画效果更加流畅；
4. 关键帧动画需要指定动画在之前或之后执行。

一些例子：

以下是一个简单的例子。当我们鼠标移到这个方块上时，方块会从左侧移动到右侧，接着又从右侧移动到左侧：

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s infinite;
  }
  
  @keyframes move {
    from { margin-left: 0; }
    to { margin-left: 400px; }
  }
</style>

<div class="box"></div>

在这个动画里，我们通过将两个关键帧的 margin-left 值设定为 begin 和 end 来设置方块移动的方向和距离。

你可能会发现，很多时候我们不希望动画完成后，元素又返回到原来的位置，这是可以使用animation-fill-mode属性来避免这个问题。只需要将animation-fill-mode属性设为forwards即可：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite forwards;
}

以上css代码说明了我们不希望动画完成后元素返回原位置。

线性动画

在键框中可以轻松指定动画方向以及使用函数来指定动画效果的变化。

@keyframes anim {
  from {left: 0;}
  to {left: 100%;}
}

@keyframes anim2 {
  0% {top: 0;}
  60% {top: 50%;}
  100% {top: 100%;}
}

@keyframes anim3 {
  0% {transform: scale(0.1);}
  30% {transform: scale(1.2);}
  80% {transform: scale(0.7);}
  100% {transform: scale(1);}
}

如您所见，我们可以使用percentages来指定在哪个时间点定义的动画样式。

最结尾

希望上面的介绍可以让您更好的掌握关键帧动画的使用方法，帮助您更好地实现动画设计。