30 CSS关键帧动画

CSS中的关键帧动画使我们能够创建复杂的动画效果。通过定义一系列的状态（或“关键帧”），我们可以控制元素在特定时间段内的样式变化。下面我们将详细探讨如何使用@keyframes规则以及动画属性。

定义关键帧动画

要创建动画，首先要使用@keyframes规则。这个规则定义了动画的步骤和每个步骤的样式。

基本语法

@keyframes animation-name {
  from {
    /* 起始样式 */
  }
  to {
    /* 结束样式 */
  }
}

示例

以下是一个简单的动画示例，元素将从透明变为不透明。

@keyframes fadeIn {
  from {
    opacity: 0; /* 初始透明 */
  }
  to {
    opacity: 1; /* 最终不透明 */
  }
}

.fade-in {
  animation: fadeIn 2s; /* 应用动画，持续时间为2秒 */
}

在HTML中使用这个类：

<div class="fade-in">Hello World!</div>

使用多个关键帧

除了from和to，我们还可以使用百分比来定义多个关键帧，使动画更加灵活。

语法

@keyframes animation-name {
  0% {
    /* 初始样式 */
  }
  50% {
    /* 中间样式 */
  }
  100% {
    /* 最终样式 */
  }
}

示例

创建一个旋转动画：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 4s linear infinite; /* 无限循环旋转，持续4秒 */
}

HTML示例：

<div class="rotate">🔄</div>

动画属性

动画属性控制动画的执行。常用的属性包括：

• animation-name: 指定要应用的动画的名称。
• animation-duration: 动画的持续时间。
• animation-timing-function: 动画的速度曲线（例如，ease, linear）。
• animation-delay: 动画开始前的延迟时间。
• animation-iteration-count: 动画执行的次数（可以设置为infinite）。
• animation-direction: 动画的方向（例如，normal, reverse, alternate）。

示例

结合多个属性的动画：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s ease infinite; /* 2秒内无限次反复的弹跳动画 */
}

HTML示例：

<div class="bounce">🚀</div>

总结

CSS 关键帧动画是一个强大的工具，使得我们可以轻松地给网页元素添加动态效果。通过定义关键帧和动画属性组合，我们可以创建丰富多彩的用户体验。记得多进行实践，可以帮助你更好地掌握动画的使用方法！