CSS 如何实现动画？

⚡ 速记答案（30 秒）

过渡：transition: property duration timing-function delay。关键帧动画：@keyframes fade { from{opacity:0;} to{opacity:1;} } .box{ animation: fade 0.5s ease-out forwards; }。

📖 详细讲解

标准面试回答（推荐记住）

CSS 实现动画有两种方式。第一种是 transition 过渡，用于简单的状态变化，语法是 transition: 属性时长缓动函数延迟。第二种是 @keyframes 关键帧动画，可以定义从 from 到 to 或者 0% 到 100% 的多个状态，然后用 animation 属性引用。animation 可以设置动画名称、时长、缓动函数、延迟、次数、方向、填充模式等。复杂动画用关键帧，简单状态切换用 transition。

✅ 面试要点

•transition 用于状态切换
•@keyframes 定义复杂动画
•animation 属性引用关键帧

💻 代码示例

CSS 动画示例

/* 过渡动画 */
.button {
  transition: transform 0.3s ease, background 0.3s;
}
.button:hover {
  transform: scale(1.05);
  background: #3b82f6;
}

/* 关键帧动画 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}