CSS 动画是提升用户体验的重要工具，无需 JavaScript 即可实现炫酷的视觉效果 💡
以下是核心知识点速览：

1. 动画基础语法

@keyframes 动画名称 {
  0% { 属性值1 }
  100% { 属性值2 }
}
元素 {
  animation: 动画名称 持续时间 播放次数;
}
  • @keyframes 定义动画
  • animation 属性控制播放参数
  • 支持 ease, linear, bounce 等缓动函数

2. 动画属性详解

属性 说明 示例
duration 动画持续时间 animation-duration: 3s
timing-function 动画速度曲线 animation-timing-function: ease-in-out
delay 动画延迟时间 animation-delay: 1s
iteration-count 播放次数 animation-iteration-count: infinite

3. 实用动画示例

  • 淡入淡出 

    @keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}
    CSS_Animation_Example

  • 平滑移动 

    @keyframes slide {
  0% { transform: translateX(0) }
  100% { transform: translateX(100px) }
}

4. 扩展学习

想要深入掌握高级动画技巧？
👉 点击这里查看 CSS 动画进阶指南

📌 提示：动画性能优化需注意 will-change 和 transform 的合理使用

5. 动画与过渡的区别

  • 过渡（Transition）：属性变化时的平滑过渡效果
  • 动画（Animation）：通过关键帧定义的复杂运动路径
  • 两者结合使用可实现更丰富的交互效果 💼
Keyframes_Keyword