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
和 animation
有什么区别？什么时候选择哪个？
这是一个经典问题，我刚开始学习CSS动画时也曾搞混
