CSS3动画怎么实现？

用CSS3做动画，算是前端开发里一件既高效又有趣的事儿。它主要靠两个家伙：transition（过渡）和animation（动画）。transition更简单直接，适合处理元素从一个状态到另一个状态的平滑转变，比如 hover 时颜色慢慢改变。

.button {
  background: blue;
  transition: background 0.5s ease;
}
.button:hover {
  background: red;
}

这段代码让按钮的背景色在0.5秒内从蓝色渐变到红色。transition需要有个触发事件，像鼠标悬停或者添加类名。

当你需要更复杂的动画，比如连续旋转、来回移动，或者有多个关键帧变化时，animation就更强大了。它需要先通过@keyframes定义一个动画序列，然后把这个动画“绑”到元素上，可以控制循环次数、方向和状态。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.box {
  animation: bounce 1s infinite;
}

这个弹跳动画会一直重复。在HTML5的应用中，这种动画能极大地增强交互反馈和视觉吸引力。

实际用起来，有几点经验。优先使用transform（变换）和opacity（透明度）来做动画，因为现代浏览器对这两个属性的优化最好，性能开销小，动画更流畅。尽量避免在动画中改变会引发页面重新布局的属性，比如width、height或者margin。

CSS3动画的核心价值在于，它能用很简洁的代码创造出流畅的视觉体验，而且性能通常比用JavaScript直接操作样式要好。把简单的交互动画交给CSS，复杂的逻辑动画再考虑JavaScript，这是一个不错的分工策略。