CSS3 动画是现代网页设计中提升用户体验的重要工具，无需依赖JavaScript即可实现丰富的动态效果。以下是核心知识点：

✅ 1. 基础动画属性

  • animation-name: 定义动画名称（如 @keyframes slide）
  • animation-duration: 动画持续时间（单位：秒/毫秒）
  • animation-timing-function: 控制动画速度曲线（ease, linear 等）
  • animation-iteration-count: 动画播放次数（infinite 循环）
  • animation-direction: 动画方向（alternate 反向播放）

⚠️ 注意：浏览器兼容性需通过 @supports 检查

📌 2. 关键帧动画示例

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 应用到元素 */
.element {
  animation: fadeIn 2s ease-in-out;
}

🧠 3. 动画类型与应用

类型 用法 示例
属性动画 opacity, transform 按钮悬停效果
形状动画 width, height 弹窗展开收缩
背景动画 background-position 滚动背景图

📚 扩展阅读

🔗 CSS3 过渡效果教程
（点击了解更多关于 transition 的基础用法）

CSS3动画示例