[分享]css关键帧是调用还是声明

CSS 帧动画是创建动态效果的有力工具。使用 CSS 关键帧可以在指定时间范围内定义动画序列，并在动画序列中定义关键帧，这些关键帧表示动画中的每个步骤。CSS 关键帧的声明语法如下：keyframes...

CSS 帧动画是创建动态效果的有力工具。使用 CSS 关键帧可以在指定时间范围内定义动画序列，并在动画序列中定义关键帧，这些关键帧表示动画中的每个步骤。

CSS 关键帧的声明语法如下：

@keyframes animation-name {
  0% {
    /* 定义动画开始时的属性值 */
  }
  50% {
    /* 定义动画中间的属性值 */
  }
  100% {
    /* 定义动画结束时的属性值 */
  }
} 

可以看到，使用 @keyframes 关键字声明一个关键帧动画，然后定义动画名称、动画序列中的关键帧、以及在每个关键帧中定义属性值的集合。也就是说，关键帧动画的声明是通过 @keyframes 来完成的。

但是，关键帧动画的调用却是通过 CSS 规则来实现的。可以在任何 CSS 规则中，使用 animation 或 animation-name 属性来调用定义的关键帧动画。例如：

/* 在元素上使用 animation 属性调用动画 */
.element {
  animation: animation-name 2s ease-in-out infinite;
}

/* 直接使用 animation-name 调用动画 */
.element {
  animation-name: animation-name;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
} 

可以看到，定义好的关键帧动画只是一组属性值的集合，要想让它真正生效，需要在 CSS 规则中调用它。因此，CSS 关键帧既不是声明，也不是调用，而是一个定义动画序列的语法结构。