CSS过渡与动画入门指南

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS过渡与动画基础教程》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

transition用于状态间平滑过渡，适合交互效果；animation通过关键帧实现复杂动画，支持多阶段与循环播放。

CSS 中的 transition 和 animation 是实现网页动效的核心属性，能让界面更生动、交互更自然。它们虽然都能控制元素的变化过程，但使用场景和机制不同。下面介绍两者的基础应用与常见用法。

transition：平滑过渡状态变化

transition 用于定义元素从一个状态平滑过渡到另一个状态的过程，适合处理用户交互引发的样式改变，比如鼠标悬停、焦点获取等。

它是一个复合属性，常用子属性包括：

• transition-property：指定要过渡的 CSS 属性，如 width、opacity、transform 等。
• transition-duration：过渡持续时间（如 0.3s）。
• transition-timing-function：过渡的速度曲线（如 ease、linear、ease-in-out）。
• transition-delay：延迟多久开始过渡。

简写示例：

pre { transition: all 0.3s ease-in-out 0.1s; }

常见应用场景：

• 按钮 hover 效果：颜色、背景色渐变。
• 菜单展开/收起：高度或透明度过渡。
• 图标旋转：配合 transform 实现平滑旋转。

注意：transition 只在属性值发生变化时触发，且只能定义“开始”和“结束”两个状态。

animation：关键帧驱动复杂动画

animation 更强大，适用于需要多个中间状态的复杂动画。它通过 @keyframes 定义关键帧，再绑定到元素上。

基本结构：

@keyframes slideIn { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } } .box { animation: slideIn 0.5s ease-out; }

animation 常用属性：

• animation-name：对应 @keyframes 的名称。
• animation-duration：动画总时长。
• animation-timing-function：速度曲线。
• animation-delay：延迟启动。
• animation-iteration-count：播放次数（可设 infinite 循环）。
• animation-direction：播放方向（normal、reverse、alternate）。
• animation-fill-mode：动画外阶段的样式保持（如 forwards 保持最终状态）。

典型用途：

• 加载动画（loading spinner）。
• 页面进入/离开动效。
• 呼吸灯、闪烁提示等循环效果。

transition 与 animation 如何选择？

简单判断：

• 如果只是“状态切换 + 平滑过渡”，比如 hover、focus，用 transition 更轻量、高效。
• 如果需要自定义中间过程、循环播放或多阶段动画，选 animation。

性能提示：优先使用 transform 和 opacity 来做动画，避免频繁重排（reflow），提升流畅度。

基本上就这些。掌握 transition 和 animation 的基础，就能应对大多数常见的网页动效需求。

到这里，我们也就讲完了《CSS过渡与动画入门指南》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS的知识点！