CSS 动画是让网页元素动起来的魔法棒！通过 @keyframes 和 animation 属性，你可以创建炫酷的过渡效果和动态视觉体验。🎉

🌟 基础概念

  • 关键帧（@keyframes）：定义动画的起始状态和结束状态
  • 动画属性（animation）：控制动画的持续时间、速度曲线、延迟等
  • 过渡效果（transition）：实现属性值的平滑变化（与动画不同）

🚀 快速上手示例

/* 定义一个闪烁效果 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* 应用动画 */
.flash {
  animation: blink 1s infinite;
}

📊 动画关键属性

属性 说明
animation-name 指定使用的 @keyframes 名称
animation-duration 动画持续时间（如 2s）
animation-timing-function 速度曲线（ease, linear 等）
animation-delay 延迟开始时间（如 0.5s）
animation-iteration-count 循环次数（infinite 表示无限循环）

🧠 进阶技巧

  1. 复合动画：同时应用多个动画效果 
    .multi-animation {
  animation: move 2s, rotate 1s infinite;
}
  2. 动画缓动函数：使用 cubic-bezier 创建自定义运动轨迹 
    .custom-bounce {
  animation-timing-function: cubic-bezier(0.1, -0.2, 0.4, 0.8);
}
  3. 动画控制：通过 JavaScript 动态控制播放状态
    点击查看动画控制实例

📚 推荐学习路径

  1. 先掌握 CSS 过渡效果基础
  2. 学习 关键帧动画详解
  3. 实践 动画性能优化技巧

Animation_Example

图示：CSS 动画效果演示

小提示：使用 animation-fill-mode: forwards 可保持动画结束时的样式状态，animation-play-state: paused 可暂停动画播放。更多细节请查看 CSS 动画进阶指南