跳到主要内容

CSS 关键帧

CSS关键帧（Keyframes）是CSS动画的核心部分，它允许你定义动画的中间状态，从而创建复杂的动画效果。通过关键帧，你可以精确控制动画的每一步变化，从简单的颜色变化到复杂的形状变换。

什么是CSS关键帧？​

CSS关键帧是一种定义动画序列的方式。它通过指定动画在不同时间点的样式，来控制动画的播放过程。关键帧通常与@keyframes规则一起使用，并通过animation属性应用到元素上。

基本语法​

css
@keyframes 动画名称 {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

在这个语法中，0%表示动画的开始，100%表示动画的结束，50%表示动画的中间状态。你可以根据需要添加更多的百分比点来定义更复杂的动画。

示例：简单的颜色变化​

让我们从一个简单的例子开始，创建一个颜色变化的动画。

css
@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

div {
  width: 100px;
  height: 100px;
  animation: colorChange 3s infinite;
}

在这个例子中，div元素的背景颜色会在3秒内从红色变为黄色，再变为绿色，然后循环播放。

关键帧的百分比点​

关键帧的百分比点定义了动画的中间状态。你可以使用任意数量的百分比点来创建复杂的动画效果。

示例：多阶段动画​

css
@keyframes multiStage {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(100px);
  }
  50% {
    transform: translateX(100px) translateY(100px);
  }
  75% {
    transform: translateX(0) translateY(100px);
  }
  100% {
    transform: translateX(0);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: multiStage 4s infinite;
}

在这个例子中，div元素会在4秒内沿着一个矩形路径移动，然后循环播放。

实际应用场景​

1. 加载动画​

加载动画是CSS关键帧的常见应用之一。通过关键帧，你可以创建一个旋转的加载图标。

css
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

2. 按钮悬停效果​

你可以使用关键帧为按钮创建悬停效果，使其在鼠标悬停时产生动画。

css
@keyframes hoverEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  animation: hoverEffect 0.5s ease-in-out;
}

button:hover {
  animation: hoverEffect 0.5s ease-in-out;
}

总结​

CSS关键帧是创建复杂动画的强大工具。通过定义关键帧，你可以精确控制动画的每一步变化，从而实现各种视觉效果。无论是简单的颜色变化还是复杂的形状变换，关键帧都能帮助你实现。

附加资源与练习​

  • 练习1：尝试创建一个关键帧动画，使一个元素在页面上来回移动。
  • 练习2：使用关键帧创建一个渐变的背景颜色动画。
  • 资源：MDN Web Docs - CSS Keyframes
提示

记住，关键帧动画的性能优化也很重要。尽量避免在动画中使用过多的复杂属性，如box-shadow或filter，这些属性可能会导致性能问题。