CSS 动画@keyframes

简介

CSS动画是一种使用CSS属性来实现元素动态效果的技术。通过在一系列关键帧（keyframes）中定义元素的样式，浏览器可以自动过渡和渲染这些样式，从而创造出流畅的动画效果。其中，使用 @keyframes 声明动画关键帧，可以定义元素在不同时间点的样式，是实现CSS动画的关键。

@keyframes 语法

@keyframes规则中，我们可以定义多个关键帧，每个关键帧定义了某一时刻的元素样式。关键帧规则以百分比（0% – 100%）或关键字（from，to）来指定时间点。

以下是@keyframes的语法：

@keyframes animationName {
  from {
    /* 元素动画的起始样式 */
  }

  to {
    /* 元素动画的结束样式 */
  }
}

或者，我们也可以使用百分比来定义关键帧的样式：

@keyframes animationName {
  0% {
    /* 元素动画的起始样式 */
  }

  50% {
    /* 元素动画中间某一时刻的样式 */
  }

  100% {
    /* 元素动画的结束样式 */
  }
}

示例

为了更好地理解@keyframes的使用方法，我们来看几个实际的示例。

平移动画

下面的示例展示了如何创建一个平移动画，将一个方块从屏幕左侧移动到右侧：

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

  100% {
    transform: translateX(500px);
  }
}

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

在上面的例子中，我们使用了@keyframes声明了一个名为”move”的动画，从0%到100%的过程中，元素的transform属性的值分别从translateX(0)过渡到translateX(500px)。然后我们给一个名为”box”的元素添加了move动画，并设置了动画的持续时间（1s），动画速度曲线（linear）以及重复次数（infinite）。

旋转动画

下面的示例展示了如何创建一个旋转动画，将一个方块以中心为轴心逆时针旋转：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotate 2s linear infinite;
}

在这个例子中，我们使用@keyframes声明了一个名为”rotate”的动画，从0%到100%的过程中，元素的transform属性的值分别从rotate(0deg)过渡到rotate(-360deg)。然后我们给一个名为”box”的元素添加了rotate动画，并设置了动画的持续时间（2s），动画速度曲线（linear）以及重复次数（infinite）。

实用技巧

动画时间轴

当我们在编写复杂的动画效果时，可以使用动画时间轴来更好地控制每个关键帧之间的过渡效果。我们可以在时间轴上选择多个关键帧，并直接编辑它们的样式，从而快速预览和调整动画效果。

动画缓动函数

通过使用不同的缓动函数，我们可以改变动画的加速度，从而创造出不同的动画效果。CSS提供了多种常用的缓动函数，例如linear、ease、ease-in、ease-out和ease-in-out等。我们也可以自定义缓动函数，以实现更加个性化的动画效果。

.box {
  animation: move 1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

暂停和恢复动画

我们可以使用CSS的animation-play-state属性来暂停和恢复动画效果。通过将属性的值设置为paused，可以暂停动画；将属性的值设置为running，可以恢复动画。

.box:hover {
  animation-play-state: paused;
}

兼容性

@keyframes和CSS动画在现代浏览器中得到了很好的支持。但是，在某些较旧的浏览器中，可能不支持@keyframes和CSS动画相关的功能。

为了兼容旧版浏览器，我们可以使用JavaScript框架（如jQuery）来模拟动画效果，或者使用CSS前缀来兼容性地编写动画样式。

@-webkit-keyframes move {
  /* Safari and Chrome */
}

@-moz-keyframes move {
  /* Firefox */
}

@-o-keyframes move {
  /* Opera */
}

@-ms-keyframes move {
  /* IE */
}