17370845950

@keyframes用于定义动画关键帧，通过animation属性应用到元素，控制样式变化过程。

在CSS中，@keyframes 用于定义动画的关键帧，控制元素在动画过程中的样式变化。通过它，你可以精确设定某个时间点上元素的样式状态，浏览器会自动补全中间过渡效果。

定义关键帧动画

使用 @keyframes 后跟一个自定义的动画名称，然后在大括号中设置不同阶段的样式：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

也可以用百分比来更灵活地控制过程：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

应用动画到元素

定义好动画后，使用 animation 属性将动画绑定到目标元素上：

.animated-box {
  animation: slideIn 2s ease-in-out 0.5s forwards;
}

其中参数依次为：

• 动画名称（如 slideIn）
• 持续时间（如 2s）
• 缓动函数（如 ease-in-out）
• 延迟时间（如 0.5s）
• 填充模式（如 forwards，保持最后一帧）

常用 animation 子属性

你也可以分开写各个动画属性，便于维护：

• animation-name: 指定 @keyframes 定义的动画名
• animation-duration: 动画持续时间
• animation-timing-function: 过渡曲线（如 linear、ease、cubic-bezier()）
• animation-delay: 延迟启动时间
• animation-iteration-count: 循环次数（可设数字或 infinite）
• animation-direction: 播放方向（normal、reverse、alternate）
• animation-fill-mode: 动画外时间的样式（如 backwards、forwards）
• animation-play-state: 控制运行与暂停（running、paused）

基本上就这些。只要定义好关键帧，再通过 animation 应用，就能实现丰富的视觉效果。注意命名不要冲突，动画性能也尽量避免过度使用高消耗属性（如 top/left，推荐用 transform 替代）。