CSS3 中的@keyframes介绍

那我就来详细讲解一下“CSS3 中的 @keyframes 介绍”的完整攻略。

什么是 @keyframes？

@keyframes 是 CSS3 的一个关键字，用来定义一组动画。

它的基本语法如下：

@keyframes animation-name {
  0% {
    /* 定义动画开始前的状态 */
  }
  50% {
    /* 定义动画中间的状态 */
  }
  100% {
    /* 定义动画结束后的状态 */
  }
}

animation-name 就是动画的名称，你可以随便定义一个。

每个百分比所定义的样式，就是动画在对应时间点的样式。例如，我们可以使用 0% 来定义动画开始前的状态，100% 来定义动画结束后的状态。同时，也可以使用中间的百分比来定义动画中间的状态。

基本示例

这里给出一个简单的示例，用 @keyframes 来定义一个从左往右的移动动画：

/* 定义一个名为 move 的动画 */
@keyframes move {
  /* 0% 是动画开始前的状态，left 设置为 0 */
  0% {left: 0}
  /* 100% 是动画结束后的状态，left 设置为 200px */
  100% {left: 200px}
}

/* 给元素添加上 move 动画 */
.div {
  animation: move 1s;  /* 持续时间为 1s */
  position: relative; /* 注意，这里需要 position: relative */
}

这样，我们就给一个名为 div 的元素添加了一个从左往右移动的动画。

多动画示例

接下来，我们来看一个更加复杂的示例，它包含了多个动画及其组合。

这里的示例展示了如何使用 @keyframes 来定义一个弹跳球的动画，我们将它分解为了多个子动画以实现一个更加自然的动画效果。

/* 子动画：球从下向上跳 */
@keyframes bounce-top {
  0%, 100% {bottom: 0} /* 0% 和 100% 位置都在底部，就是球的静止状态 */
  50% {bottom: 200px} /* 50% 位置球跳到了最高点：bottom: 200px */
}

/* 子动画：球从上向下跳 */
@keyframes bounce-bottom {
  0% {bottom: 200px} /* 0% 位置球在最高点，下落 */
  50%, 100% {bottom: 0} /* 50% 和 100% 位置都在底部，就是球的静止状态 */
}

/* 定义一个由纵向的两个子动画组合而成的动画 */
@keyframes bounce {
  0%, 100% {transform: scale(1)} /* 0% 和 100% 位置都是默认比例，就是球的静止状态 */
  25% {transform: scale(0.8) translateY(0)} /* 25% 位置缩小并向上跳 */
  40% {transform: scale(1.2) translateY(-150px)} /* 40% 位置放大并向上跳 */
  55% {transform: scale(1.2) translateY(0)} /* 55% 位置维持原大小在最高点，切换子动画 */
  70% {transform: scale(0.8) translateY(75px)} /* 70% 位置缩小并向下跳 */
  80% {transform: scale(1.1) translateY(0)} /* 80% 位置放大并向下跳 */
  90% {transform: scale(1.1) translateY(0)} /* 90% 位置维持原形态在底部 */
}

.ball {
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  background-color: #00A0FF;
  animation: bounce 2s infinite;
  /* 2s 甚至是因为 bounce 的总时长是 2s */
  /* 注意，这里需要 position: absolute 和 bottom: 0 */
}

这个复杂的示例中，我们定义了三个不同的动画：bounce-top、bounce-bottom 和 bounce。其中，bounce-top 和 bounce-bottom 是两个纵向的子动画，分别代表球从下向上跳和从上向下。bounce 动画包含了这两个纵向的子动画和其它的状态定义，实现了一个真正意义上的“弹跳球”效果。

最后，我们把这个动画应用在了一个名为 ball 的元素上，通过 animation 属性来指定动画，设置 infinite 后表示动画将无限循环播放。