CSS 动效基础

7.1 CSS 动效基础CSS 动效是前端交互反馈与视觉体验的核心实现方式基于浏览器合成线程原生渲染具备 GPU 加速能力性能远优于 JavaScript 动画。CSS 动效体系分为过渡动画与关键帧动画两大核心类型配合原生动画事件实现动画生命周期的回调控制能够覆盖状态反馈、入场出场、循环装饰等绝大多数动效场景是构建流畅交互体验的基础。7.1.1 transition 过渡动画一、核心原理过渡动画是状态驱动的补间动画针对元素的两个状态默认态与 hover 态、类名切换态等在状态变化时自动计算中间帧实现属性的平滑过渡。它是最简单的 CSS 动效形式适合交互触发的状态变化反馈。二、核心属性transition是简写属性包含四个子属性按顺序为属性名、时长、缓动函数、延迟时间。属性说明取值示例transition-property指定应用过渡的 CSS 属性all表示所有可过渡属性all、opacity、transformtransition-duration过渡持续时间单位秒(s)或毫秒(ms)0.3s、300mstransition-timing-function过渡缓动曲线控制动画的速度变化ease、linear、ease-in-out、cubic-bezier(0.4, 0, 0.2, 1)transition-delay过渡延迟触发时间单位秒或毫秒0s、100ms三、缓动函数详解缓动函数决定动画的运动感是动效自然度的核心linear匀速线性运动适合匀速旋转、位移动画ease默认值慢-快-慢自然的运动感通用场景ease-in慢入快出加速运动适合元素出场、下落动画ease-out快入慢出减速运动适合元素入场、停止动画ease-in-out慢入慢出两端平缓适合悬停切换、来回过渡cubic-bezier(x1,y1,x2,y2)自定义贝塞尔曲线精准控制运动曲线四、基础示例/* 按钮悬停过渡所有属性 0.3 秒缓动过渡 */ .btn { background: #1677ff; transform: scale(1); transition: all 0.3s ease; } .btn:hover { background: #4096ff; transform: scale(1.05); }五、特点与边界优势实现简单声明式配置性能优异状态切换时自动反向过渡局限仅支持两个状态之间的过渡无法控制中间帧无法主动播放必须依赖状态触发部分属性不可过渡如display、float最佳实践优先使用transform和opacity实现动效触发 GPU 合成避免重排重绘性能最优避免使用all指定具体属性减少性能开销7.1.2 animation 关键帧动画一、核心原理关键帧动画通过keyframes规则定义动画过程中的多个关键帧状态浏览器自动补全中间帧支持多阶段、循环、反向等复杂动画效果无需状态触发即可独立播放是复杂 CSS 动效的标准实现方式。二、核心属性animation是简写属性包含 8 个子属性完整控制动画的全生命周期。属性说明取值示例animation-name绑定的 keyframes 关键帧名称fadeInanimation-duration单次动画持续时间1sanimation-timing-function单帧间的缓动函数ease-outanimation-delay动画延迟播放时间0.2sanimation-iteration-count动画播放次数1、infinite无限循环animation-direction动画播放方向normal正向、reverse反向、alternate交替往返animation-fill-mode动画填充模式控制动画前后的状态none、forwards停在结束帧、backwards提前应用起始帧、bothanimation-play-state动画播放状态running运行、paused暂停三、keyframes 定义方式支持两种关键帧定义方式from / to两帧动画等价于 0% 和 100%百分比多帧动画定义任意百分比位置的状态/* 淡入上移动画 */ keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* 呼吸动画无限循环交替 */ keyframes breathe { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* 应用动画 */ .fade-in { animation: fadeInUp 0.5s ease-out forwards; } .breathe { animation: breathe 2s ease-in-out infinite alternate; }四、与 transition 的核心对比对比维度transition 过渡animation 关键帧状态数量仅两个状态起始-结束支持任意多个关键帧状态触发方式依赖状态变化触发无法主动播放可自动播放也可通过类名控制循环能力不支持循环仅往返过渡支持任意次数循环、无限循环中间控制无法控制中间过程可精准控制每一帧的状态事件回调单次过渡对应一次事件支持帧迭代、结束等多种事件适用场景交互状态反馈、悬停切换复杂动画、入场出场、循环装饰、加载动效五、fill-mode 重点说明animation-fill-mode是最容易被忽略的核心属性决定动画播放前后元素的状态none默认值动画开始前和结束后都保持元素原有样式forwards动画结束后保持最后一帧的状态是入场动画最常用的配置backwards动画延迟期间提前应用第一帧的状态避免动画开始前的跳变both同时应用 forwards 和 backwards 的效果7.1.3 动画事件transitionend、animationendCSS 动画原生提供生命周期事件用于监听动画的开始、结束、迭代等节点实现动画与业务逻辑的联动是链式动画、状态切换、入场出场流程控制的核心。一、transitionend 事件触发时机过渡动画完成时触发每个过渡属性会独立触发一次。如果同时过渡多个属性会触发多次事件。核心属性event.propertyName完成过渡的属性名用于区分不同属性的过渡event.elapsedTime过渡持续的时间单位秒基础示例const box document.querySelector(.box); box.addEventListener(transitionend, (e) { // 只处理 opacity 过渡完成的逻辑 if (e.propertyName opacity) { console.log(透明度过渡完成); // 过渡结束后移除元素 if (box.style.opacity 0) { box.remove(); } } });注意事项过渡中途被中断如状态再次变化、元素隐藏不会触发 transitionend 事件。过渡时长为 0 时不会触发事件。多个属性过渡会触发多次需通过 propertyName 过滤目标事件。二、animation 相关事件关键帧动画提供三个生命周期事件覆盖完整动画流程事件名触发时机核心说明animationstart动画开始播放时触发延迟时间结束、动画正式启动时触发animationiteration动画每完成一次迭代时触发循环动画每次循环结束触发仅 iteration-count 1 时有效animationend动画全部播放完成时触发所有迭代完成后触发无限循环不会触发基础示例入场动画结束后执行业务逻辑const modal document.querySelector(.modal); modal.addEventListener(animationend, () { console.log(弹窗入场动画完成); // 动画结束后聚焦输入框 modal.querySelector(input).focus(); });三、典型应用场景离场动画结束后移除 DOM 元素避免元素残留链式动画前一个动画结束后触发下一个动画实现序列动效动画完成回调入场动画结束后初始化业务逻辑、聚焦交互状态同步动画结束后更新业务状态避免动画未完成就执行操作