Skip to main content

动画

@keyframes​

用于定义动画过程中的关键帧，和 transition 相比，@keyframes 可以定义动画序列中的中间步骤。

@keyframes slidein {
  from { transform: translateX(0%); }
  
  50% { transform: translateX(50%); }

  to { transform: translateX(100%); }
}

from 等价于 0%，to 等价于 100%，@keyframes 中的百分数就相当于动画进行过程中的进度，从一个关键帧到另一个关键帧的过程中，元素相应的属性取值会以 animation-timing-function 的动画曲线的速率进行变化。

@keyframes move {
  from { transform: translateX(0%); }

  50% {
    transform: translateX(50%);
    margin-top: 100px;
  }

  to { transform: translateX(100%); }
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid;

  animation: move 3s ease-in-out infinite;
}

在上面这个例子中，元素的 transform: translateX(0%) 和 margin-top: 0（默认值） 会先从关键帧 0% 开始，以 ease-in-out 的动画曲线速率变化，到达关键帧 50% 时相应属性的取值，然后再从 50% 的关键帧开始，到达关键帧 100% 时相应属性的取值。

在上面的动画过程中，你只需要知道动画在两个关键帧之间，元素的 transform 和 margin-top 属性取值是在不断变化的，会从当前关键帧的属性取值 不断接近直至到达 目标关键帧的属性取值。

如果同一个关键帧重复定义，那么关键字中的相同属性会被后一个关键帧覆盖。

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

上面的例子中，在 50% 处的关键帧中的属性实际上为 { top: 10px; left: 20px; }

animation-name​

animation-name: <keyframes-name>;

用于指定动画的一组动画序列（@keyframes），默认值为 none。

animation-duration​

animation-duration: <time>;

用于指定一组动画序列的完成周期时长，默认值为 0s，表示无动画。

animation-timing-function​

animation-timing-function: <timing-function>;

用于指定关键帧序列中两个关键帧之间动画的变化速率，默认值为 ease，原理和 transition-timing-function 一致。

animation-delay​

animation-delay: <time>;

动画首次开始前的延迟时间，默认值为 0s。

animation-iteration-count​

animation-iteration-count: <number> | infinite;

设置动画的关键帧序列循环次数，默认为 1，取值为 infinite 时表示无限循环播放动画。

需要注意的是，<number> 也可以设置为小数。

animation-direction​

animation-direction: normal | reverse | alternate | alternate-reverse;

用于设置动画的关键帧序列执行的顺序，默认值为 normal，表示顺序执行关键帧序列。

  • reverse，关键帧序列反向执行
  • alternate，关键帧序列的执行顺序正向和反向交替，第一次执行关键帧序列时正向，第二次反向，第三次正向，第四次 ...
  • alternate-reverse，原理和 alternate 一样，不同的是第一次执行关键帧时是反向

animation-fill-mode​

animation-fill-mode: none | forwards | backwards | both;

该属性一般用于规定元素在 动画播放开始之前（使用了 delay） 或者 结束后（有限次循环），所保持的样式，默认值为 none，表示元素在动画播放结束后，最终的样式即元素初始的样式（和关键帧没关系）。

该属性理解得还不够透彻，现在只需要知道，如果要实现动画结束后不恢复为原来的样式，那么需要使用 forwards 关键字。

animation-play-state​

animation-play-state: running | paused;

该属性用于暂停或者恢复播放一个动画，默认值为 running。常配合 js 来使用。

animation 简写​

animation: 
<animation-name> <animation-duration> <animation-timing-function> 
<animation-delay> <animation-iteration-count> <animation-direction> 
<animation-fill-mod> <animation-play-state>;

上述的所有动画相关属性都可以使用 animation 来简写，如果某一项没有写出来，则会取默认值。

属性的顺序任意，但是对于时间值，animation 中的第一个时间值表示 animation-duration，第二个时间值才表示 animation-delay。

will-change​