1. 先把动画这件事想清楚CSS 动画和过渡这两个词听起来是同一回事但在实际项目里它们解决的问题完全不同。过渡transition处理的是从一个状态到另一个状态的变化过程比如按钮悬停变色、菜单展开收起本质上是给状态切换加一层平滑的缓冲。而 CSS 动画animation配合 keyframes 关键帧可以定义多阶段的、可循环的、带节奏的复杂运动比如加载转圈、弹窗弹出、涟漪扩散这些都不是简单的两态切换能搞定的。你要是翻一下社区里的提问会发现很大一部分人卡在为什么我的 transition 没生效或者为什么动画结束之后元素跳回原样这类问题上。这些坑我在项目里也都踩过所以这篇内容从核心概念开始讲然后把 transition 和 animation 各自拆开逐个讲清参数、触发条件和常见问题最后聊性能优化和实际案例。适合刚接触动效的前端新手也适合已经写了一段时间 CSS 但想系统梳理动画知识的朋友看完之后你应该能快速判断这个动效用 transition 还是 animation并且动手实现常见的交互动效。动效这件事最重要的不是技术炫技而是它能不能让界面状态变化更容易被用户理解。比如一个按钮点击后有一个按压反馈用户就知道我点中了一个弹窗从底部滑入用户就知道层级关系变了。动画是交互的翻译器做得好就是锦上添花做得过头就是灾难。下面我按自己的实际经验把这个主题掰开揉碎讲一遍。2. transition 与 animation 的核心差异2.1 两态切换与多阶段运动transition 的官方定义是元素从一个 CSS 属性值变化到另一个属性值时中间过程按照指定时间曲线来过渡。它只关心起始值和结束值比如 hover 前背景是白色hover 后背景是蓝色那 transition 负责把中间的颜色渐变过程放出来。它的天然限制是你只能定义首尾两个状态中间插值完全交给浏览器你没法控制中间 30% 和 70% 的位置。animation 就不一样了。它配合 keyframes 可以定义任意多个关键帧比如一个动画从 0% 到 20% 到 60% 到 100%每一帧都能指定不同的属性值运动路径可以非常复杂。而且 animation 不依赖任何触发条件页面加载之后可以自动运行也可以无限循环还能反向播放。transition 必须要有条件变化比如 hover、focus、class 切换没有状态变化就不会触发过渡。选型的时候有个简单判断标准如果这个动效是状态 A 切到状态 B用 transition如果动效有多个阶段、需要循环或者需要独立时间轴控制用 animation。比如按钮 hover 变色用 transition 就够了loading 旋转动画就必须用 animation。2.2 两者背后的动画机制差异再往深一点说transition 的动画过程其实是在属性值变化的那一刻浏览器从当前计算值开始按照你设定的时间向目标计算值进行插值插值完成之后动画就结束了元素停留在最终状态。animation 则不同它每一帧之间的插值逻辑由开发者通过 keyframes 显式定义而且动画结束后默认回到动画开始之前的样式除非你设置 fill-mode: forwards。这个机制差异带来的实际影响非常明显。transition 一旦动画结束元素就永久停在终点状态所以不会有回到原点的问题。但 animation 默认行为是动画播放完回到初始状态很多新手第一次用 animation 时遇到动画结束后元素跳回去就是这个原因解决办法是加 animation-fill-mode: forwards 让元素保持最后一帧的样式。这个细节我在第 4 部分会专门展开。从性能角度看两者底层都是浏览器合成器在工作但 animation 因为可以持续运行对性能的消耗天然比 transition 高。如果只是简单的 hover 反馈用 transition 就够没必要动用 animation 让复合层一直保持激活状态。3. transition让状态切换平滑起来3.1 transition 的四个子属性transition 是缩写属性完整的写法可以拆成四项transition-property要过渡的属性、transition-duration过渡时长、transition-timing-function缓动函数、transition-delay延迟时间。我见很多初学者在写的时候直接写一个 duration比如 transition: 0.3s这其实表示所有可过渡属性都按 0.3s 来虽然能 work但如果你只想让背景色过渡、其他属性瞬间切换还是要手动指定 transition-property。实际项目中我一般这么配.btn { background: #3498db; transition: background-color 0.25s ease 0s; } .btn:hover { background: #2980b9; }这样语义很清楚只过渡背景色其他属性不参与过渡时间 0.25 秒缓动函数用 ease没有延迟。如果写成 transition: all 0.25s在 hover 时所有属性变化都会产生动画效果性能开销更大而且容易产生一些意想不到的过渡比如宽度变化时触发布局抖动。正式项目里我基本不用 all都是明确列出要过渡的属性。3.2 缓动函数动画的灵魂缓动函数是过渡动画里最容易被人忽略但影响最大的参数。默认的 ease 曲线是快-慢-快适合大多数场景但用它做弹窗出现总觉得差点意思。我在项目里最常用的是 cubic-bezier这是 CSS 提供的自定义贝塞尔曲线入口可以手动调出加速后带一点回弹或者先慢后快再结尾减速的效果。cubic-bezier 的四个参数对应控制点的坐标x 轴是时间轴y 轴是进度轴取值区间 0 到 1。理解它不需要数学功底你只要记住几个常用预设值就行曲线名称cubic-bezier 值适用场景easecubic-bezier(0.25, 0.1, 0.25, 1)通用场景ease-incubic-bezier(0.42, 0, 1, 1)出场动画元素离开ease-outcubic-bezier(0, 0, 0.58, 1)入场动画元素出现ease-in-outcubic-bezier(0.42, 0, 0.58, 1)对称过渡图片切换如果你想自己调曲线浏览器 DevTools 的动画标签页里可以直接拖动曲线实时预览效果比纯凭感觉写数值靠谱得多。我个人经验是直线型动画比如方块移动用 ease-out 会更自然因为现实生活中物体启动时需要的力更大速度从零逐步提高而不是从头到尾匀速。3.3 触发条件与常见误区transition 的核心是必须有状态变化。常见的触发方式有伪类触发:hover、:focus、:active、JS 增删 class 触发、以及 CSS 特性如媒体查询触发。新手最容易犯的几个错误我来排一下第一是忘了加初始状态。比如你写 .box { transition: width 0.3s; }然后 hover 时改宽度这没问题。但如果你想让某个元素在加载时就执行一次动画过渡根本不会执行因为初始状态下根本没有变化。这种情况只能改用 animation。第二是 display: none 和 transition 不兼容。你用一个弹窗点击关闭按钮时设置 display: none期望它平滑消失结果是瞬间消失。原因很简单display 切换并不会触发过渡因为 display 不是可插值属性。解决方法是用 visibility opacity 组合或者用 animation 的 keyframes 在动画结尾设置 display: none。第三是忽略过渡结束后的锁定状态。有时候你设了一个延迟比如 transition-delay: 1s用户 hover 之后 1 秒才有反应这个延迟在鼠标离开时同样生效会导致交互手感迟钝。如果只是想给进入加延迟、离开不加延迟可以分别写在不同的规则里。4. animation多阶段动画的正确打开方式4.1 keyframes 语法与动画属性清单animation 的核心是 keyframes它定义了动画在时间轴上的各个关键帧状态。最常见一个 loading 旋转动画可能是这样keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; }这里的 animation 缩写看似只有动画名、时长、循环方式三项但它的完整属性其实有 8 个animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。很多项目里我只用其中五六个但你要知道有一个 animation-play-state 可以暂停/恢复动画这个在页面切换时特别有用。4.2 动画事件与 JS 协同动画不只是 CSS 的事很多时候你需要知道动画什么时候结束好让 JS 去执行下一步。CSS 提供了三个动画事件animationstart、animationiteration、animationend。比如一个弹窗动画结束后要把焦点移到弹窗内部就可以监听 animationendmodal.addEventListener(animationend, function (e) { if (e.animationName pop-in) { input.focus(); } });transition 也有对应的 transitionend 事件。这里有个容易踩的坑如果过渡或动画的属性有多个transitionend 事件可能会触发多次每次对应一个属性。解决办法是用 e.propertyName 来判断具体是哪个属性结束或者用 e.animationName 过滤动画名称。这个事件回调在实际项目里经常被用来做动画结束之后再移除节点比 setTimeout 精确得多。还有一个细节是 animationiteration 事件它在动画每次循环结束之后触发。如果你做了类似轮播的效果可以用它来切换 content而不需要在 JS 里靠 setTimeout 硬算时间。4.3 常见的 animation 问题显示不全与回弹关于动画显示不全这个热词我印象很深。很多人在做从屏幕底部滑入的动画时发现元素在动画过程中总有一段时间看不到或者滑动过程中被裁剪。这大概率是父容器 overflow: hidden 导致的动画过程中元素超出父容器边界时会被裁剪掉。另外还有个元素动画结束后跳回原位的问题这个在上面提到过原因是 animation-fill-mode 默认值是 none动画结束后元素回到动画开始前的状态。你可以在 animation 缩写里直接加 forwards.animate-in { animation: slide-in 0.4s ease-out forwards; }这样动画结束后元素会保留在 100% 关键帧的状态。类似的还有 backwards它让元素在动画开始前的延迟阶段就应用 0% 关键帧的样式避免延迟期间看到初始状态。实际项目中我基本都写 forwards很少用 none除非动画本身就是无限循环的。5. 性能优化动效卡不卡全看这里5.1 只动 transform 和 opacity浏览器渲染页面大致经过布局Layout— 绘制Paint— 合成Composite三个阶段。如果你过渡的属性是 width、height、top、left浏览器需要重新计算布局触发整个页面重排这个开销很大。如果你过渡 transform 和 opacity浏览器可以跳过布局和绘制直接让合成器处理这个性能差距在移动端尤其明显。所以我写动画的性能铁律是能用 transform 的就不用 top/left能用 opacity 的就不用 display/background 变化来模拟淡入淡出。举个例子你要做一个弹窗从底部滑入的效果与其改 bottom 属性不如用 transform: translateY()因为 transform 只影响合成阶段性能好很多。5.2 will-change 的正确使用will-change 提示浏览器提前优化某个属性比如 will-change: transform 告诉浏览器这个元素准备做 transform 动画了先准备好合成的状态。但它不是万能的用了之后浏览器会为该元素创建独立的合成层占内存如果页面里几十个元素都加 will-change反而拖慢性能。正确姿势是只在动画即将开始前通过 JS 加上动画结束后移除。静态页面里大量使用 will-change 是不推荐的。现在现代浏览器的合成机制已经足够智能transform 动画很多时候不用手动加 will-change 也不卡我一般只在确实卡顿或者一个动画特别复杂时才会加。5.3 DevTools 动画性能检查当你觉得动画卡怎么定位问题打开 Chrome DevTools 的 Performance 面板点击录制按钮触发动画操作然后看录制结果。重点看 Frames 里有没有标红的帧标红代表渲染耗时过长。再去看 Main 线程的火焰图如果有很多黄色的 Layout 和 Paint 任务说明动画触发了大量布局和绘制需要调整动画属性。这里分享一个我的排查思路先确认动画是不是只改了 transform 和 opacity如果是那就看是不是页面某个区域太大了导致合成层过大内存吃紧。如果动画确实复杂可以把动画的边界做小或者降低同时播放的动画数量。另外在移动端测试时建议开启 DevTools 的 CPU 降速模拟低端机的性能这样能提前发现性能问题。6. 实战案例三个高频动效的完整实现6.1 涟漪光圈扩散效果涟漪扩散在按钮点击、地图标注、新版 UI 提醒上非常常见它的核心就是一层层圆形从中心向外扩散并逐渐透明。实现思路是做一个绝对定位的圆形元素然后用 animation 不断放大它并降低 opacitykeyframes ripple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } } .ripple { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; background: rgba(52, 152, 219, 0.5); transform: translate(-50%, -50%); animation: ripple 1s ease-out infinite; }这里有两个细节需要说明。第一个是 transform: translate(-50%, -50%) 必须写在一起否则 scale 会把中心点改变。第二个是动画的 scale 从 0 到 4如果容器的 overflow 是 hidden扩散到容器边界外时会被裁剪所以要根据实际容器大小调整 scale 的最终值。我给按钮加涟漪时一般会在点击位置动态创建涟漪节点动画结束后移除节点这样不影响布局。6.2 加载动画旋转与骨架屏的取舍最简单的加载动画就是上面的 spin转圈。但实际产品里骨架屏的体验往往比转圈更好因为它让用户知道页面结构正在加载。骨架屏的动画通常是一个灰白色的渐变条在页面区块上循环扫过这个动效用 animation 加一个移动的渐变背景就能实现keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; }核心思路是把一个宽度的渐变背景通过 background-position 来回移动让视觉上产生光扫过的效果。这里 background-size 必须比元素宽不然背景移动时会有接缝。skeleton 的容器一般是圆角矩形动画时长 1.2 到 1.5 秒之间比较自然太快会闪得难受太慢又显得页面卡。6.3 hover 延迟关闭的过渡技巧界面里常见的场景是鼠标悬停展开一个浮层移开后浮层不能瞬间消失否则用户从按钮移到浮层的路径中浮层就消失了。解决办法是给关闭设置延迟给展开设置零延迟或短延迟.popover { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s, visibility 0s linear 0.2s; } .trigger:hover .popover { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease 0s, transform 0.2s ease 0s, visibility 0s linear 0s; }这里有几个重点。visibility 不能直接过渡但可以用延迟来实现动画结束后才隐藏的效果。展开时 visibility 的延迟是 0立即可见关闭时 visibility 延迟 0.2s和淡出动画同步结束这样浮层不会在淡出过程中过早消失。transform 用 translateY(8px) 和 translateY(0) 产生轻微的位置偏移比纯淡入更有层次感。如果你希望鼠标从 trigger 移动到 popover 期间也保持显示那需要把 popover 放到 trigger 的兄弟节点并做成绝对定位或者用 JS 监听 mouseenter/mouseleave 来控制延迟这个用 CSS 也可以做到但需要父容器包裹两者避免两者之间出现悬停断档。7. 动效相关的技术与选型思考7.1 CSS 动画网站与动效样式库网上有很多现成的 CSS 动效参考站点比如 Animate.css、Hover.css、Magic Animations这些库的代码可以直接扒下来改造。我以前遇到不熟悉的动效会先去这些库搜有没有类似的有就把 keyframes 复制到自己项目里调整时长和缓动能省不少时间。但我不建议把整个库引入项目因为库的体积往往很大很多动效你根本用不上。正确做法需要哪个动画就只复制对应的关键帧和类名。还有一点有些库的动效只做了 Webkit 前缀适配新版浏览器已经不需要太多前缀直接写标准属性就行。CSS 动效样式库给新手最大的价值不是省事而是让你从里面学到各种常见动效的实现思路。说白了动画的灵感很多时候是从别人代码里学来的自己从零发明一个动效反而容易画虎不成反类犬。7.2 CSS 动画和 JS 动画怎么选经常有同学问CSS 动画和 JS 动画比如 requestAnimationFrame、GSAP怎么选我的经验是简单的状态切换和 UI 交互动效用 CSS复杂的、需要大量物理模拟的、或者需要精确控制的动效用 JS。CSS 的优势在于声明式写法简洁、性能好、天然与样式体系融合但它不适合做需要逐帧计算的动效比如拖拽跟随、弹簧效果、滚动视差等。GSAP 这类 JS 动画库的优势是时间线控制、缓动曲线丰富、可以对任意数值类型做动画在复杂的 Web 交互场景非常强势。但它的体积和学习成本也不小如果项目里只有几个 hover 动效完全不需要引入。还有一个中间方案是 Web Animations API它把 CSS animation 的能力带到了 JS 中语法更接近 JS 的方式但我个人用下来还是觉得它不够 GSAP 流畅浏览器兼容性也需要考虑日常项目我会慎用。总的来说技术选型不是越复杂越好而是看场景、看团队维护成本。7.3 动画与页面其他模块的配合动画不是孤立存在的它会和 CSS Grid、Flex 布局、CSS Mask 等很多特性一起用。比如一个卡片列表用 Grid 布局hover 卡片时做一个 lift 效果transform: translateY(-4px) 加 box-shadow这个动效和布局完全没有冲突因为 transform 不会改变布局尺寸。但如果你在 Flex 容器内部直接改变子元素的宽度那就会触发布局重排性能会差很多。另一个搭配场景是 CSS Mask 和动画。mask 可以配合动画实现一些精致的遮罩效果比如页面转场时圆形遮罩从中心扩散通常叫 circle reveal用 mask 加 animation 就能实现不用引入额外库。类似的还有背景渐变动画、文字渐变效果这些都属于视觉细节用动画可以让 UI 更精致但要注意不要让页面处处都在动那样反而抓不住用户注意力。根据我个人经验做动效的第一步不是写代码是想清楚这个动效服务于什么交互。一个元素要不要动、怎么动、动多久都要从用户角度出发。动效太多用户会觉得眼花动效太少页面又显得生硬这个平衡需要不断在真实项目里摸索。我每次做完一组动效都会把动画时长统一到 0.2s、0.3s、0.4s 这几个档位避免单个页面出现七八种时长节奏视觉上统一很多也方便后期维护。最后分享一个小技巧如果你在写一个复杂动画可以先在浏览器 DevTools 里把 animation-duration 调成 0.1s 看关键帧位置是否合理再调回正常时长看最终效果这样调起来效率高很多。CSS 动画和过渡这块技术难点其实不多真正的功夫在审美和对交互的理解上多写多想慢慢就找到手感了。