1. 引言为什么需要 CSS 动画与过渡在现代 Web 开发中流畅的动画与过渡效果是提升用户体验、引导用户注意力、增强界面反馈的关键手段。CSS 提供了两种核心的动态样式能力过渡transition和动画animation。它们允许开发者在不依赖 JavaScript 或复杂库的情况下创建平滑、高性能的视觉变化。本文将以前端“MSDN”开发者技术文档的风格系统性地介绍 CSStransition属性的工作原理、语法、使用场景并对比其与keyframes基础动画的异同帮助你根据实际需求选择最合适的技术方案。2. CSS 过渡transition详解2.1 什么是过渡CSS 过渡transition是一种在 CSS 属性值发生变化时控制其变化过程从旧值到新值的方式。它让变化不是瞬间完成而是在一个指定的持续时间duration内按照某种时间函数timing function平滑地过渡。过渡通常由用户交互如:hover、:focus或 JavaScript 修改样式触发。2.2 transition 属性语法transition是一个简写属性用于同时设置以下四个子属性/* 简写语法 */ transition: property duration timing-function delay; /* 示例所有属性在 0.3 秒内以 ease 方式过渡无延迟 */ transition: all 0.3s ease; /* 示例分别指定多个过渡 */ transition: background-color 0.5s ease-out, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;子属性说明transition-property指定应用过渡的 CSS 属性名称。值可以是all所有可过渡属性、none无或具体的属性名如opacity、transform。transition-duration过渡持续的时间。单位可以是s秒或ms毫秒如0.3s、500ms。必须指定否则过渡不会发生。transition-timing-function定义过渡效果的速度曲线。预设值包括ease默认慢速开始然后加速慢速结束。linear匀速。ease-in慢速开始。ease-out慢速结束。ease-in-out慢速开始和结束。cubic-bezier(n,n,n,n)自定义贝塞尔曲线。steps(n, start|end)阶梯函数。transition-delay过渡开始前的延迟时间。单位同duration。默认值为0s。2.3 可过渡的属性并非所有 CSS 属性都支持过渡。一般来说具有中间值的属性才支持例如颜色类color,background-color,border-color数值/长度类width,height,margin,padding,font-size变换类transform性能极佳推荐优先使用视觉效果类opacity,visibility,box-shadow布局类flex-grow,grid-template-columns部分浏览器支持对于display: none到display: block这类离散属性变化通常需要结合opacity和visibility或使用keyframes动画来实现淡入淡出效果。2.4 实战示例按钮悬停效果!DOCTYPE html html langen head style .button { padding: 12px 24px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; /* 定义过渡背景色和变换属性持续0.3秒ease-out曲线 */ transition: background-color 0.3s ease-out, transform 0.2s ease-out; } .button:hover { background-color: #0056b3; /* 背景色变化 */ transform: translateY(-2px); /* 轻微上移 */ } .button:active { transform: translateY(0); /* 点击时复位 */ } /style /head body button classbutton悬停看我变化/button /body /html3. CSS 基础动画keyframes3.1 什么是 CSS 动画CSS 动画通过keyframes规则定义一系列关键帧从 0% 到 100%然后使用animation属性将动画应用到元素上。与过渡相比动画不需要触发事件可以自动播放、循环、反向播放并且可以定义更复杂的多阶段序列。3.2 keyframes 规则与 animation 属性/* 1. 定义关键帧 */ keyframes slide-in { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } /* 2. 应用动画 */ .element { animation: slide-in 1s ease-out 0.5s both; }animation 子属性说明animation-namekeyframes动画的名称。animation-duration动画一个周期的时长。animation-timing-function速度曲线同transition-timing-function。animation-delay动画开始前的延迟。animation-iteration-count播放次数。infinite表示无限循环。animation-direction播放方向normal,reverse,alternate,alternate-reverse。animation-fill-mode动画执行前后如何应用样式none,forwards,backwards,both。animation-play-state控制播放状态running,paused。3.3 实战示例加载旋转动画!DOCTYPE html html langen head style keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #007bff; /* 应用动画名称spin时长1秒线性无限循环 */ animation: spin 1s linear infinite; } /style /head body div classspinner/div /body /html4. Transition 与 Animation 的核心区别与选型指南特性CSS 过渡TransitionCSS 动画Animation触发方式需要触发事件如:hover,:focus, JS 修改样式可自动播放无需外部触发控制粒度控制“从状态 A 到状态 B”的过渡过程可通过keyframes定义多个中间状态0%, 25%, 50%, 100%循环播放不支持循环一次性的支持无限循环infinite方向控制通常单向A→B反向需再次触发支持反向、交替播放alternate执行前后状态结束后元素样式保持在触发后的最终状态可通过animation-fill-mode控制前后样式适用场景简单的交互反馈悬停、聚焦、显示/隐藏复杂的多阶段动画、加载动画、自动播放的展示动画选型建议使用 Transition当你需要为样式状态的简单变化添加平滑效果时。例如按钮悬停颜色变化、模态框淡入淡出、元素位置微调。使用 Animation当你需要自动播放、循环播放或定义包含多个关键帧的复杂动画序列时。例如加载旋转图标、页面入场动画、复杂的品牌动效。5. 性能最佳实践优先使用transform和opacity这两个属性可以由合成器线程处理不会触发重排reflow或重绘repaint性能最佳。避免过渡/动画会触发重排的属性如width、height、margin、padding、top、left等。如果必须使用考虑用transform: scale()或translate()替代。使用will-change属性谨慎对即将发生动画的元素添加will-change: transform, opacity;可以提示浏览器提前优化。但不要滥用以免消耗过多内存。减少同时进行的动画数量过多的并发动画可能导致帧率下降。6. 总结CSS 过渡transition与动画keyframesanimation是构建现代 Web 动态界面的两大基石。过渡擅长处理简单的、由事件触发的状态间平滑变化动画则提供了更强大的时间轴控制适用于自动播放、循环、多阶段的复杂动效。在实际开发中应根据交互逻辑和视觉效果复杂度选择合适的工具。牢记性能优化原则优先使用transform和opacity方能创造出既流畅又高效的视觉体验。