CSS过渡通过transition实现，使样式变化平滑进行。例如，按钮悬停时背景色在0.3秒内按ease-in-out曲线渐变，提升交互流畅度。可同时过渡多个属性或使用all简化，但推荐明确列出以增强控制。常用可动画属性包括尺寸、颜色、位置、透明度和transform等，其中transform和opacity因GPU加速而性能更优。避免动画width、height等触发布局重算的属性以防卡顿。可通过will-change提示浏览器优化，但需谨慎使用。与animation相比，transition适用于简单状态间过渡，而animation支持关键帧和复杂序列，适合更精细控制的场景。选择依据是动画复杂度与是否需中间关键帧。
CSS过渡效果的核心在于让元素的样式变化不再是瞬间完成，而是平滑地、在一段时间内逐渐改变。它能极大地提升用户界面的流畅度和交互体验，让用户感觉操作更自然。
CSS过渡效果主要通过
transition
属性来实现。这个属性其实是
transition-property
（指定哪个CSS属性要过渡）、
transition-duration
（过渡持续时间）、
transition-timing-function
（过渡速度曲线）和
transition-delay
（过渡延迟时间）的简写。理解这些单独的部分，即使平时多用简写，也能帮助我们更好地控制动画。
想象一下，我们想让一个按钮在鼠标悬停时背景色平滑地改变。 首先，我们定义按钮的初始样式：
.my-button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; /* 关键在这里：声明要过渡的属性、时长和速度曲线 */ transition: background-color 0.3s ease-in-out; }
接着，我们定义它在悬停时的样式：
.my-button:hover { background-color: #0056b3; /* 悬停时颜色变深 */ }
当鼠标移到
.my-button
上时，
background-color
属性会从
#007bff
在
0.3
秒内平滑地过渡到
#0056b3
，过渡过程遵循
ease-in-out
（开始慢，中间快，结束慢）的速度曲线。如果没有那行
transition
声明，颜色变化就会瞬间完成，显得很生硬。这是一个很小的细节，但对用户体验的影响却很大。
立即学习“前端免费学习笔记（深入）”；
有时候，我们可能需要同时过渡多个属性。你可以用逗号将它们分隔开：
.card { width: 200px; height: 150px; background-color: lightgray; transform: scale(1); box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.5s linear; } .card:hover { transform: scale(1.05); /* 放大一点 */ box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 阴影变深 */ background-color: #f0f0f0; /* 背景色微变 */ }
或者，为了简洁，你也可以使用
all
来过渡所有可动画的属性。不过，我个人在复杂组件上通常会明确列出属性，这样控制力更强，也避免了不必要的动画：
.simple-element { width: 100px; height: 100px; background-color: red; /* 简单但可能不够精细，所有可动画属性都会过渡 */ transition: all 0.4s ease; } .simple-element:hover { width: 120px; height: 120px; background-color: blue; border-radius: 50%; /* 也会被all捕获并过渡 */ }
transition-timing-function
是另一个有趣的地方。除了
ease-in-out
，还有
linear
（匀速）、
ease
（默认，先加速后减速）、
ease-in
（加速）、
ease-out
（减速），甚至可以自定义
cubic-bezier()
曲线，来创造独特的动画节奏。
transition-delay
则是在动画开始前设置一个等待时间。这在需要链式动画或者希望动画稍后才开始的场景中非常有用。
.fade-in-after-delay { opacity: 0; /* 0.5秒的过渡时长，1秒的延迟 */ transition: opacity 0.5s ease-out 1s; } .fade-in-after-delay.is-visible { opacity: 1; }
当
.is-visible
类被添加时，元素会先等待1秒，然后才开始在0.5秒内渐入。
哪些CSS属性可以平滑过渡？如何避免动画卡顿？
不是所有CSS属性都能平滑过渡的，这是我刚开始学习时踩过几次坑的地方。基本上，只有那些值可以被浏览器“插值”（即计算出中间状态）的属性才能进行过渡。比如，
width
从100px到200px，浏览器可以计算出每一步的宽度；
color
从红到蓝，RGB值也可以平滑变化。但像
display: none
到
display: block
这种，它没有中间状态，所以是不能过渡的。
font-family
也一样，你不能从宋体平滑过渡到黑体。
我通常会记住一些常用的、可平滑过渡的属性：
- 尺寸与间距：
width
,
height
,
margin
,
padding
,
border-width
,
font-size
,
line-height
- 颜色与背景：
color
,
background-color
,
border-color
- 位置：
top
,
right
,
bottom
,
left
(通常与
position: absolute/relative
配合)
- 视觉效果：
opacity
,
transform
(包含
translate
,
rotate
,
scale
,
skew
等，这个非常强大且性能好),
box-shadow
,
text-shadow
,
filter
- 文本相关：
letter-spacing
,
word-spacing
至于避免动画卡顿，这确实需要一些实践经验和对浏览器渲染机制的理解。最常见的问题是动画在主线程上执行，如果主线程同时在处理复杂的JavaScript或页面布局计算，动画就可能掉帧，看起来不流畅。
我的经验是：
- 优先使用
transform
和
opacity
：
这两个属性通常由GPU（图形处理器）加速，性能表现非常好。例如，移动一个元素时，使用transform: translateX()
或
translateY()
通常比直接改变
left
或
top
属性要流畅得多，尤其是在移动设备上。改变
left
/
top
会触发布局（layout）和绘制（paint），而
transform
通常只触发复合（composite），效率更高。
- 避免在动画中改变会触发布局（layout）的属性： 像
width
,
height
,
margin
,
padding
这些属性，如果它们的值在动画过程中频繁变化，浏览器就不得不反复计算元素的几何结构和位置，这会消耗大量性能。如果非要动画这些属性，尽量减少动画元素的数量或缩短动画时长。
- 合理使用
will-change
属性：
这是一个性能优化的小技巧。你可以提前告诉浏览器哪些属性会发生变化，让它为这些变化做优化准备。例如：will-change: transform, opacity;
。但要注意，不要滥用它，因为它会占用额外的内存资源，只在确实需要优化的关键动画上使用。
- 硬件加速的考量： 某些情况下，给元素添加
transform: translateZ(0);
或
backface-visibility: hidden;
可以尝试强制浏览器使用GPU渲染。但这并非万能药，有时反而可能引入新的渲染问题，比如字体模糊。我通常只在遇到明显卡顿且其他方法无效时才会尝试。
- 减少重绘区域： 动画影响的元素范围越小，或者改变的属性影响的区域越小，性能通常越好。
这些优化策略归根结底就是尽量减少浏览器的工作量，或者将工作分派给更高效的GPU来处理。
transition
transition
和
animation
有什么区别？什么时候选择哪个？
这是一个经典问题，我刚开始学习CSS动画时也曾搞混
css教程 css javascript word java 处理器 显卡 浏览器 ai 区别 css动画 硬件加速 JavaScript css Filter Property 线程 主线程 function display position margin padding border background transform transition animation 性能优化 word