什么是CSS动画？

CSS动画通过@keyframes规则实现元素属性的动态变化，常用于创建平滑过渡效果或复杂交互。例如：

  • 按钮悬停时的缩放效果
  • 图标旋转加载动画
  • 元素渐入渐出的淡入淡出效果

📘 扩展学习：想深入了解动画进阶技巧？点击前往 /learn/frontend/css/animation/advanced 探索！

动画核心属性

属性 说明 示例
animation-name 指定使用的关键帧规则 @keyframes bounce
animation-duration 动画持续时间 2s
animation-timing-function 动画速度曲线 ease-in
animation-iteration-count 循环次数 infinite
animation-delay 延迟开始时间 1s
css_animation

简单示例

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.box {
  animation: slideIn 1s ease-in forwards;
}

✅ 效果预览：尝试在 /learn/frontend/css/animation/demo 查看实时动画演示！

动画最佳实践

  1. 避免过度使用动画影响用户体验
  2. 优先使用硬件加速属性（如transform、opacity）
  3. 通过animation-fill-mode控制动画结束后状态
  4. 合理设置动画延迟与持续时间的配合
animation_example