transition用于属性变化的平滑过渡，适合状态切换；animation通过@keyframes定义复杂动画序列，支持自动播放与循环，适用于多阶段动画。
CSS中的transition和animation，它们本质上都是为了让网页元素动起来，不再是静态的。简单来说，transition更像是给元素的“瞬间变身”加了个缓冲，让变化过程平滑自然；而animation则是一段可以独立定义、更复杂的“表演”，它有自己的剧本（关键帧），能反复上演，甚至能倒放。
解决方案
在我看来，掌握transition和animation，是前端开发者提升用户体验、让页面“活”起来的关键。它们各自有擅长的领域，理解并灵活运用，能让你的设计更上一层楼。
先说transition。它主要用于元素在不同状态（比如鼠标悬停、点击后）之间切换时，提供一个平滑的过渡效果。你不用写JavaScript，纯CSS就能搞定。
.box {
width: 100px;
height: 100px;
background-color: blue;
/* 告诉浏览器，当width属性变化时，用0.3秒平滑过渡 */
transition: width 0.3s ease-in-out;
/* 也可以写成 shorthand: transition: all 0.3s ease-in-out 0s; */
}
.box:hover {
width: 200px; /* 鼠标悬停时宽度变化 */
}这里，transition属性可以分解成几个子属性：
立即学习“前端免费学习笔记（深入）”；
-
transition-property: 指定要过渡的CSS属性，比如width、background-color，或者all（所有可动画属性）。 -
transition-duration: 过渡持续的时间，比如0.3s。 -
transition-timing-function: 过渡的速度曲线，像ease（慢-快-慢）、linear（匀速）、ease-in（加速）、ease-out（减速），或者自定义的cubic-bezier()。 -
transition-delay: 延迟多久才开始过渡。
然后是animation。这玩意儿就厉害了，它能让你定义一个完整的动画序列，不依赖于元素状态的改变，可以自动播放、循环播放，甚至控制播放方向。核心在于@keyframes规则。
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(50%); /* 稍微超出一点再回来 */
}
}
.element {
width: 150px;
height: 50px;
background-color: green;
/* 应用名为slideIn的动画，持续2秒，无限循环，交替播放 */
animation: slideIn 2s infinite alternate;
}animation属性同样是一系列子属性的缩写：
-
animation-name: 引用你定义的@keyframes名称。 -
animation-duration: 动画持续时间。 -
animation-timing-function: 动画速度曲线。 -
animation-delay: 动画开始前的延迟。 -
animation-iteration-count: 动画播放次数，可以是数字或infinite（无限次）。 -
animation-direction: 动画播放方向，normal（正向）、reverse（反向）、alternate（交替）、alternate-reverse。 -
animation-fill-mode: 动画播放完后，元素保持动画的哪个状态，forwards（结束状态）、backwards（开始状态）、both。 -
animation-play-state: 控制动画播放或暂停，running或paused。
在我看来，选择哪个，很大程度上取决于你的需求。如果只是想让某个属性在特定事件（如hover）发生时平滑变化，transition是首选，它简洁高效。但如果你需要一个独立的、复杂的、有多个阶段的动画，或者需要动画自动播放、循环播放，那animation就是不二之选。
CSS动画与过渡：如何选择最适合你的交互效果？
这确实是个老生常谈的问题，但每次我都会发现，很多人在面对一个具体的交互需求时，还是会犹豫。我个人总结下来，主要看两点：触发机制和动画复杂度。
transition的触发机制非常明确，它必须依赖于某个CSS属性的变化。比如你鼠标悬停，改变了元素的宽度、颜色，或者通过JavaScript给元素添加了一个类名，这个类名里包含了新的样式。它就像一个条件反射，有输入才有输出。这种模式特别适合那些“响应式”的微交互，比如按钮的悬停效果、菜单项的展开收起、图片边框的渐变等等。它最大的优点就是简单直接，代码量少，易于维护。
举个例子，一个按钮的点击波纹效果，如果只是简单的背景色或阴影变化，transition就能轻松搞定。
.button {
background-color: #007bff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.button:active {
background-color: #0056b3;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
}而animation呢，它的触发机制就自由多了。它可以页面加载完就自动播放，也可以通过JavaScript精确控制它的开始、暂停、快进、倒退。它不依赖于元素状态的直接改变，而是自己有一套“剧本”——@keyframes。这个剧本可以定义动画在不同时间点（百分比）的状态，从而实现非常复杂的、多阶段的动画效果。比如一个加载动画、一个引导页的元素入场动画、一个循环播放的背景效果，甚至是角色行走、跳跃的帧动画模拟。
你想想看，一个复杂的logo动画，或者一个元素从屏幕外飞入、旋转、再淡出的效果，用transition就几乎不可能实现，或者说，就算勉强实现，代码也会变得非常臃肿和难以理解。这时候，animation的@keyframes就显得无比强大和优雅。
所以，我的建议是：
-
简单、状态驱动的微交互，首选
transition。 它能让你用最少的代码，实现最自然的过渡。 -
复杂、多阶段、自动播放或需要精细控制的动画，毫无疑问选择
animation。 它赋予你创造无限可能的能力。
别害怕尝试，多动手写写，你会发现它们各自的魅力。
掌握CSS动画关键帧：从基础到复杂效果的实现技巧
@keyframes是CSS animation的灵魂，没有它，animation就无从谈起。理解并熟练运用@keyframes，是制作高质量CSS动画的核心技能。
最基础的@keyframes定义，就是指定动画的开始（from或0%）和结束（to或100%）状态。
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.05);
}
}
/* 应用：一个元素会从小到大一点点放大 */
.heart {
animation: pulse 1s infinite alternate;
}这很简单，对吧？但@keyframes的强大之处在于，你可以在0%到100%之间，插入任意多的中间状态。比如，我想让一个元素先向左移动，然后旋转，最后回到原位并淡出。
@keyframes complexMovement {
0% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
25% {
transform: translateX(-50px) rotate(45deg);
opacity: 0.8;
}
50% {
transform: translateX(0) rotate(90deg);
opacity: 0.5;
}
75% {
transform: translateX(50px) rotate(135deg);
opacity: 0.2;
}
100% {
transform: translateX(0) rotate(180deg);
opacity: 0;
}
}
.fancy-element {
animation: complexMovement 4s ease-in-out forwards;
}这里，每个百分比代表动画持续时间的一个节点。浏览器会负责计算这些节点之间的平滑过渡。这就像电影制作中的关键帧，你只需要定义几个关键时刻的画面，中间的过渡交给动画师（这里是浏览器）去填充。
在实践中，有几个小技巧可以帮助你更好地利用@keyframes：
-
组合属性： 不要害怕在一个关键帧内同时改变多个CSS属性。比如
transform、opacity、background-color都可以一起动。 -
重复关键帧： 有时候，为了达到特定的效果，你可能需要让两个相邻的关键帧拥有相同的属性值。比如，你想让一个元素在动画进行到50%时暂停一下，你可以设置
49%和50%的关键帧拥有相同的属性。 -
使用
calc()和变量： 结合CSS变量（--var-name）和calc()函数，可以创建更动态、更易于调整的动画。 -
animation-fill-mode的妙用： 记住forwards和backwards。forwards可以让元素在动画结束后保持在最终状态，这在一些入场动画或单次播放动画中非常有用。backwards则让元素在动画延迟期间就应用动画的初始状态。 - 多个动画叠加： 你可以在一个元素上同时应用多个动画，用逗号分隔。这允许你将复杂的动画拆解成几个更简单的部分，然后组合起来。
.multi-animation-element {
animation: bounce 1s ease-out infinite, fadeIn 0.5s ease-in forwards;
}
/* 假设bounce和fadeIn是已定义的@keyframes */对我来说，@keyframes不仅仅是写代码，它更像是一种思维方式，让你把一个动态效果拆解成一个个静态的瞬间，然后通过时间的流逝把它们串联起来。多练习，多思考，你会发现它真的能让你的网页充满活力。
优化CSS动画性能：避免卡顿，提升用户体验的实战策略
即便我们已经熟练掌握了transition和animation，但在实际项目中，动画卡顿、不流畅的问题依然时有发生。这不仅仅是用户体验的问题，更可能让你的网站显得“廉价”。优化CSS动画性能，在我看来，是每个前端开发者都应该具备的“基本功”。
1. 优先使用transform和opacity进行动画
这是最重要的原则之一。浏览器在渲染页面时，会经历布局（Layout）、绘制（Paint）和合成（Composite）几个阶段。某些CSS属性的改变会触发“回流”（reflow，即重新计算布局）和“重绘”（repaint，即重新绘制元素），这些操作非常耗费性能，尤其是在动画过程中频繁触发，就会导致卡顿。
而transform（包括translate、scale、rotate、skew）和opacity属性，它们的改变通常只影响“合成”阶段，不会触发回流和重绘。这意味着它们可以直接在GPU上进行处理，效率极高。
比如，你想移动一个元素，不要用left、top、margin等属性，而应该用transform: translateX() translateY()。
/* 糟糕的动画，可能导致回流 */
.bad-move {
position: absolute;
left: 0;
transition: left 0.5s;
}
.bad-move.active {
left: 100px;
}
/* 更好的动画，使用transform */
.good-move {
transform: translateX(0);
transition: transform 0.5s;
}
.good-move.active {
transform: translateX(100px);
}2. 利用will-change属性
will-change是一个性能优化利器，它告诉浏览器“这个元素将来会发生某些变化，你最好提前做些准备”。浏览器收到这个提示后，可能会为该元素创建独立的渲染层（layer），从而在动画发生时避免触发布局或绘制操作。
.animated-element {
/* 提前告诉浏览器，这个元素的transform和opacity会变化 */
will-change: transform, opacity;
transition: transform 0.3s, opacity 0.3s;
}
.animated-element:hover {
transform: scale(1.1);
opacity: 0.8;
}但要注意，will-change不是万能药，也别滥用。如果给太多元素添加will-change，反而可能因为创建过多的渲染层而消耗更多内存，适得其反。只在你确定会发生复杂动画的元素上使用它。
3. 减少动画的元素数量和复杂度
想象一下，你让页面上100个元素同时进行复杂的动画，这几乎必然会导致性能问题。尽可能地减少同时动画的元素数量，或者简化它们的动画效果。如果可能，将复杂的动画分解成更小的、独立的动画，或者使用SVG动画、Canvas动画来处理那些特别复杂的图形动画。
4. 避免在动画中使用高开销的CSS属性
除了left/top/margin，还有一些属性也要警惕，比如box-shadow、border-radius（在某些旧浏览器或复杂形状下）、filter等。它们虽然可以动画，但计算成本相对较高。如果非要用，尽量用transform和opacity来模拟或辅助。
5. 使用硬件加速（GPU加速）
transform和opacity通常会自动获得硬件加速。但有时，你也可以通过一些小技巧强制浏览器使用GPU，比如给元素添加一个transform: translateZ(0);或transform: translate3d(0, 0, 0);。这会把元素提升到一个独立的渲染层，交给GPU处理。
.force-gpu {
transform: translateZ(0); /* 强制开启硬件加速 */
/* 或者 transform: translate3d(0, 0, 0); */
}但同样，这也不是银弹。过度使用会导致GPU内存消耗增加，尤其是在移动设备上。
在我多年的实践中，我发现性能优化常常是一个权衡的过程。没有一劳永逸的解决方案，关键在于理解浏览器渲染机制，并根据具体情况选择最合适的优化策略。多用浏览器开发者工具（比如Chrome的Performance面板）来分析动画的帧率和性能瓶颈，这会给你最直接的反馈。
