CSS过渡和动画怎么写？transition与animation让网页动起来的入门实战

网页为什么看起来活？很大程度靠动效。很多新手以为动画很难，其实 CSS 就能搞定大部分。今天老陈讲两个最常用的：transition 过渡和 animation 动画。懂了这两个，按钮变色、图标旋转、菜单展开你都能做。

一、transition 过渡是什么

transition 负责让属性变化有一个过程，而不是直接跳变。比如鼠标移上去颜色从灰变红，加了过渡就是慢慢变，看着顺滑。它只要四个参数：属性名、时长、速度曲线、延迟。

二、transition 实战：按钮变色

看一段最简单的代码：

先写 .btn { background: #888; transition: background 0.3s ease; }，再写 .btn:hover { background: #e4393c; }。鼠标移上去，背景在0.3秒内平滑变红。想同时过渡多个属性，就用逗号分开，例如 transition: background 0.3s, transform 0.3s;。

三、animation 动画是什么

transition 是两种状态之间过渡，animation 则是按关键帧循环播放，适合更复杂的动效，比如一直转的加载圈。它靠 @keyframes 定义每一帧的样子，再用 animation 属性绑定到元素上。

四、animation 实战：加载旋转

定义一个旋转：@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }，然后 .loader { animation: spin 1s linear infinite; }。infinite 表示无限循环，一个不停转动的图标就出来了。你还能用百分比写多关键帧，做出弹跳、渐隐等效果。

五、新手避坑

• 别给所有属性加过渡，会卡顿，只对需要变化的属性加。
• 动画时长别太长，用户等不及，0.2到0.5秒最自然。
• transform 和 opacity 性能最好，尽量用它们做动效，少用宽高变化。
• 尊重用户的减弱动态偏好，必要时用媒体查询关掉动画。

老陈总结

transition 管状态切换的顺滑，animation 管循环播放的动效，记住这个分工就不乱了。建议你打开编辑器，照着上面的按钮和加载圈各写一遍，改改时长和颜色感受差别。动手比看十遍都管用。想系统学前端，可以看老陈的系统课程，或评论区留言发链接给你。