zh/tutorials/css-animations

🎉 CSS 动画教程：打造炫酷的网页效果

CSS 动画是现代网页设计中不可或缺的技能，通过简单的代码即可实现元素的动态效果。以下是关键知识点：

🔑 基础概念

动画（Animation）：通过 @keyframes 定义动画规则，结合 animation 属性应用到元素上
过渡（Transition）：使用 transition 属性实现属性值的平滑变化
关键帧（Keyframes）：控制动画在不同时间点的状态（如 0%, 50%, 100%）

🎨 常用动画属性

属性	说明
`animation-name`	指定动画名称（必须与 `@keyframes` 命名一致）
`animation-duration`	动画持续时间（如 `2s`）
`animation-timing-function`	动画速度曲线（如 `ease-in`, `linear`）
`animation-iteration-count`	动画播放次数（`infinite` 表示无限循环）
`animation-delay`	动画开始前的延迟时间

🖼️ 图片示例

💡 实用技巧

结合 transform：平移、旋转、缩放等操作能减少重绘，提升性能
使用 will-change：提前声明需要变化的属性，优化渲染效率
注意兼容性：部分浏览器需添加 -webkit- 前缀（如 -webkit-transform）
控制动画状态：通过 animation-play-state 实现暂停/播放切换

📌 实例演示

/* 定义动画 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* 应用动画 */
.box {
  animation: bounce 1s infinite;
}

🔗 扩展阅读

深入理解 CSS3 动画与过渡：CSS3 教程
探索 HTML5 与 CSS 动画的结合技巧：HTML5 教程

✨ 通过掌握这些内容，你可以轻松为网页添加生动的交互效果！记得多练习，探索更多创意哦~