CSS动画

** CSS动画**

理解CSS动画

CSS动画通过transition和@keyframes实现元素动态效果（如渐变、移动、旋转），用于增强用户体验（如按钮悬停、页面切换）。

需要掌握的知识点

• Transition：
  • 属性：transition-property（动画属性，如width）、transition-duration、transition-timing-function（缓动函数，如ease）、transition-delay。
  • 简写：transition: all 0.3s ease。
  • 场景：按钮hover效果、平滑高度变化。
• @keyframes：
  • 定义动画关键帧：@keyframes name { from { ... } to { ... } }。
  • 属性：animation-name、animation-duration、animation-iteration-count、animation-fill-mode等。
  • 场景：复杂动画，如加载Spinner、元素滑动。
• 性能优化：
  • 优先使用transform和opacity（触发GPU加速，减少重排）。
  • 避免动画中更改width、margin等触发重排的属性。
• 常见场景：
  • 按钮hover：transition: background-color 0.2s ease。
  • 页面切换：@keyframes slideIn { from { transform: translateX(100%) } }。
• 面试问题：
  • Q：如何优化CSS动画性能？
    A：使用transform和opacity，避免重排，启用will-change。
  • Q：transition和animation的区别？
    A：transition适合简单状态变化，animation通过@keyframes定义复杂动画序列。