CSS Animation 基础从零开始理解动画在深入编辑器实现之前先理解 CSS 动画的核心概念。什么是 CSS AnimationCSS Animation 让网页元素从一个样式状态平滑过渡到另一个状态。与 Transition过渡不同Animation 可以定义多个中间状态关键帧实现更复杂的动画效果。.element{animation:slideIn 1s ease-out forwards;}keyframesslideIn{from{transform:translateX(-100%);opacity:0;}to{transform:translateX(0);opacity:1;}}animation 属性详解animation是一个简写属性包含 8 个子属性属性说明默认值示例animation-name关键帧名称noneslideInanimation-duration动画时长0s1s,500msanimation-timing-function时间函数节奏easelinear,ease-in,cubic-bezier()animation-delay延迟开始时间0s0.5s,200msanimation-iteration-count循环次数1infinite,2,3animation-direction播放方向normalreverse,alternate,alternate-reverseanimation-fill-mode动画前后状态noneforwards,backwards,bothanimation-play-state播放状态runningpaused,runningduration时长动画完成一个周期所需的时间.fast{animation-duration:0.3s;}/* 快速 */.normal{animation-duration:1s;}/* 正常 */.slow{animation-duration:3s;}/* 缓慢 */timing-function时间函数控制动画的速度曲线决定了动画的节奏感内置关键字linear匀速速度不变ease慢 → 快 → 慢默认值最自然ease-in慢速开始ease-out慢速结束ease-in-out慢速开始和结束贝塞尔曲线.custom{animation-timing-function:cubic-bezier(0.68,-0.55,0.265,1.55);}cubic-bezier.com 可以可视化调整曲线参数。步进函数.steps{animation-timing-function:steps(5,end);/* 分 5 步完成 */}适合制作逐帧动画如精灵图动画。iteration-count循环次数.once{animation-iteration-count:1;}/* 播放一次 */.twice{animation-iteration-count:2;}/* 播放两次 */.forever{animation-iteration-count:infinite;}/* 无限循环 */direction播放方向normal正向播放默认reverse反向播放alternate正向 → 反向交替alternate-reverse反向 → 正向交替.ping-pong{animation:bounce 1s ease-in-out infinite alternate;}alternate配合infinite可以实现来回效果。fill-mode填充模式这是最容易忽略但很重要的属性none动画前后都应用元素原始样式forwards动画结束后保持最后一帧的样式backwards动画延迟期间应用第一帧的样式both同时应用 forwards 和 backwards/* 动画结束后停留在最后一帧 */.stay{animation:fadeIn 0.5s forwards;}/* 延迟 1 秒才开始但延迟期间已经显示第一帧 */.delayed{animation:slideIn 1s 1s backwards;}play-state播放状态.paused{animation-play-state:paused;}.running{animation-play-state:running;}可以用 JavaScript 控制动画的暂停和继续element.style.animationPlayStatepaused// 暂停element.style.animationPlayStaterunning// 继续keyframes 详解keyframes定义动画的关键帧序列。from/to 语法keyframesfadeOut{from{opacity:1;}to{opacity:0;}}等价于keyframesfadeOut{0%{opacity:1;}100%{opacity:0;}}多关键帧语法keyframesbounce{0%{transform:translateY(0);}25%{transform:translateY(-30px);}50%{transform:translateY(0);}75%{transform:translateY(-15px);}100%{transform:translateY(0);}}关键帧不必是等间隔的可以根据效果灵活设置。多属性动画一个关键帧可以同时定义多个属性keyframescomplex{0%{transform:translateX(0)rotate(0deg);opacity:0;background-color:#fff;}50%{transform:translateX(100px)rotate(180deg);opacity:1;background-color:#f0f0f0;}100%{transform:translateX(200px)rotate(360deg);opacity:0.5;background-color:#ddd;}}transform 的顺序很重要transform的多个函数按从左到右的顺序执行顺序不同会导致不同效果/* 先旋转再平移 */.rotate-then-move{transform:rotate(45deg)translateX(100px);}/* 先平移再旋转 */.move-then-rotate{transform:translateX(100px)rotate(45deg);}推荐顺序translate→rotate→scale。CSS Animation vs CSS Transition特性AnimationTransition关键帧数量多个只有两个状态循环支持需要额外处理自动触发是需要状态变化复杂度较高较低控制粒度精细粗糙选择建议简单的两状态切换如 hover 效果→ 用transition复杂的多步骤动画 → 用animation需要循环播放 → 用animation需要精细控制时间曲线 → 用animation事件监听JavaScript 可以监听动画事件constelementdocument.querySelector(.animated)// 动画开始element.addEventListener(animationstart,(){console.log(Animation started)})// 动画结束element.addEventListener(animationend,(){console.log(Animation ended)})// 每次循环结束仅当 iteration-count 1 或 infinite 时element.addEventListener(animationiteration,(){console.log(Animation iteration)})性能优化原则1. 优先使用 transform 和 opacity这两个属性不会触发重排reflow和重绘repaint由 GPU 加速/* ✅ 好高性能 */.optimized{transform:translateX(100px);opacity:0;}/* ❌ 差触发重排 */.bad{left:100px;top:50px;width:200px;}/* ❌ 差触发重绘 */.also-bad{background-color:red;color:white;}2. 使用 will-change 提示浏览器.will-animate{will-change:transform,opacity;}告诉浏览器提前优化但不要滥用——只在真正需要动画的元素上使用。3. 避免同时动画大量元素每个动画元素都占用 GPU 资源几十个同时动画会导致卡顿。可以使用IntersectionObserver只动画可见区域constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){entry.target.classList.add(animate)}})})document.querySelectorAll(.lazy-animate).forEach(el{observer.observe(el)})4. 减少动画复杂度/* 简单 */.simple{animation:fadeIn 0.5s;}/* 复杂可能影响性能 */.complex{animation:complexMove 3scubic-bezier(0.68,-0.55,0.265,1.55)infinite;filter:blur(5px)brightness(1.2);box-shadow:0 10px 30pxrgba(0,0,0,0.3);}常见动画模式淡入淡出keyframesfadeIn{from{opacity:0;}to{opacity:1;}}keyframesfadeOut{from{opacity:1;}to{opacity:0;}}滑入keyframesslideInLeft{from{transform:translateX(-100%);opacity:0;}to{transform:translateX(0);opacity:1;}}keyframesslideInRight{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}缩放keyframesscaleUp{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}keyframespulse{0%, 100%{transform:scale(1);}50%{transform:scale(1.1);}}旋转keyframesspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.loading{animation:spin 1s linear infinite;}弹跳keyframesbounce{0%, 20%, 50%, 80%, 100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}CSS 动画的核心关键帧CSS 动画的本质就是定义一系列关键帧浏览器会自动补全中间状态keyframesbounce{0%{transform:translateY(0);}50%{transform:translateY(-30px);}100%{transform:translateY(0);}}.element{animation:bounce 1s ease infinite;}keyframes定义了动画的剧本animation属性控制演出方式——时长、节奏、循环次数等。但手写关键帧有个痛点看不到效果。改个数值刷新页面不对再改再刷新……这个过程太低效了。可视化编辑器的设计思路核心功能就三个时间轴可视化展示关键帧位置点击添加新帧属性面板编辑选中帧的 transform、opacity、背景色实时预览修改即时生效无需刷新时间轴的实现时间轴是一个 0-100% 的进度条每个关键帧是一个可拖拽的圆点interfaceKeyframeData{offset:number// 0-100关键帧位置translateX:numbertranslateY:numberscale:numberrotate:numberopacity:numberbackgroundColor:string}点击时间轴空白处自动吸附到最近的 5% 刻度consthandleTimelineClick(e:React.MouseEventHTMLDivElement){constrecte.currentTarget.getBoundingClientRect()constxe.clientX-rect.leftconstpercentMath.round((x/rect.width)*20)*5// 吸附到 5% 刻度constclampedMath.max(0,Math.min(100,percent))if(!keyframes.some(kk.offsetclamped)){addKeyframe(clamped)}}CSS 代码生成编辑器的核心价值是生成可用的 CSS 代码。关键帧生成逻辑constgenerateKeyframesCSS(keyframes:KeyframeData[]){constsorted[...keyframes].sort((a,b)a.offset-b.offset)constlinessorted.map(k{consttransforms:string[][]if(k.translateX!0||k.translateY!0){transforms.push(translateX(${k.translateX}px) translateY(${k.translateY}px))}if(k.scale!1)transforms.push(scale(${k.scale}))if(k.rotate!0)transforms.push(rotate(${k.rotate}deg))constprops:string[][]if(transforms.length0){props.push(transform:${transforms.join( )};)}if(k.opacity!1){props.push(opacity:${k.opacity};)}props.push(background-color:${k.backgroundColor};)return${k.offset}% {\n${props.join(\n)}\n }})returnkeyframes myAnimation {\n${lines.join(\n)}\n}}注意transform的顺序translate→scale→rotate。顺序不同效果也不同。animation 属性的简写animation是个简写属性包含多个子属性constanimationShorthand(){letval${animationName}${duration}s${timingFunction}if(delay0)val${delay}sval${iterationCount}${direction}if(fillMode!none)val${fillMode}returnval}完整语法animation: name duration timing-function delay iteration-count direction fill-mode几个容易踩的坑timing-function 放在 delay 前面顺序错了会被解析错误fill-mode 很重要forwards让动画停在最后一帧backwards让动画在延迟期间显示第一帧direction 的 alternate配合infinite实现来回播放预设动画的实现内置了几个常用动画预设方便快速上手constpresetAnimations{bounce:{keyframes:[{offset:0,translateY:0,scale:1},{offset:25,translateY:-40,scale:1.1},{offset:50,translateY:0,scale:1},{offset:75,translateY:-20,scale:1.05},{offset:100,translateY:0,scale:1},],duration:1,timingFunction:ease,},// ... 其他预设}预设的选择基于实际开发经验bounce弹跳效果适合按钮、图标pulse脉冲效果适合提醒、通知shake抖动效果适合错误提示fadeIn淡入效果适合页面加载性能优化建议CSS 动画本身性能不错但有些细节需要注意1. 只动画 transform 和 opacity这两个属性不会触发重排重绘由 GPU 加速/* 好 */.element{transform:translateX(100px);opacity:0.5;}/* 差 */.element{left:100px;background-color:rgba(0,0,0,0.5);}2. will-change 提前告知浏览器.element{will-change:transform,opacity;}但不要滥用只用在真正需要的元素上。3. 避免动画过多元素每个动画元素都会占用 GPU 资源。如果页面有几十个动画元素考虑用IntersectionObserver只动画可见区域。实际应用场景上周用这个工具做了个落地页的动画选择slideIn预设调整 translateX 从 -100 到 0添加一个关键帧在 30%设置 opacity: 0.5制造淡入效果调整 duration 为 0.6stiming-function 改为 ease-out复制生成的 CSS 代码粘贴到项目里整个过程 5 分钟搞定效果比手写调半天好多了。工具地址在线体验CSS Animation Timeline功能特点可视化时间轴编辑内置 6 种预设动画实时预览效果一键复制 CSS 代码支持所有 animation 属性相关工具CSS Gradient Generator | Loading Generator