第29篇CSS动画学习目标掌握keyframes关键帧的定义方式理解animation所有子属性的含义和用法能够编写常见的 UI 动画加载、提示、微交互了解 CSS 动画与 JavaScript 动画的选择场景核心知识点1. keyframes — 定义关键帧关键帧动画由一系列时间点的样式状态组成浏览器自动补间过渡。/* 基本语法 */keyframesfadeIn{from{opacity:0;}/* 0% */to{opacity:1;}/* 100% */}/* 多关键帧 */keyframesbounce{0%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}100%{transform:translateY(0);}}关键帧百分比0%或from— 动画开始100%或to— 动画结束中间任意百分比 — 自定义时间点2. animation 属性大全属性含义常用值animation-name引用 keyframesfadeIn、bounceanimation-duration动画时长0.5s、2sanimation-timing-function速度曲线ease、linear、ease-in-outanimation-delay延迟开始1s、-0.5s负值表示已进行一半animation-iteration-count播放次数1、3、infiniteanimation-direction播放方向normal、reverse、alternateanimation-fill-mode动画前后状态none、forwards、backwards、bothanimation-play-state播放/暂停running、paused简写语法.element{animation:bounce 1s ease-in-out 0.5s infinite alternate;/* name duration timing-function delay iteration-count direction */}animation-fill-mode 详解/* 动画结束后保持最后一帧 */.box{animation:slideIn 0.5s forwards;}/* 动画开始前应用第一帧解决延迟期间的空白 */.box{animation:fadeIn 1s 2s backwards;}/* 同时应用 forwards 和 backwards */.box{animation:slideIn 0.5s both;}值开始前结束后none默认样式默认样式forwards默认样式最后一帧backwards第一帧默认样式both第一帧最后一帧animation-directionanimation-direction:normal;/* 正向播放 */animation-direction:reverse;/* 反向播放 */animation-direction:alternate;/* 正→反→正→反... */animation-direction:alternate-reverse;/* 反→正→反→正... */3. 实战常见动画模式淡入keyframesfadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.card{animation:fadeIn 0.5s ease-out;}脉冲心跳效果keyframespulse{0%, 100%{transform:scale(1);}50%{transform:scale(1.1);}}.heart{animation:pulse 1s ease-in-out infinite;}旋转加载keyframesspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#4a90d9;border-radius:50%;animation:spin 0.8s linear infinite;}抖动错误提示keyframesshake{0%, 100%{transform:translateX(0);}20%{transform:translateX(-10px);}40%{transform:translateX(10px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}.input-error{animation:shake 0.4s ease-in-out;}呼吸灯keyframesbreathe{0%, 100%{opacity:0.4;transform:scale(0.9);}50%{opacity:1;transform:scale(1.1);}}.dot{animation:breathe 2s ease-in-out infinite;}4. 多动画组合一个元素可以同时应用多个动画.element{animation:fadeIn 0.5s ease-out,slideUp 0.5s ease-out 0.2s both;}5. 用 JS 控制动画// 暂停/播放consteldocument.querySelector(.spinner);el.style.animationPlayStatepaused;el.style.animationPlayStaterunning;// 动态添加动画类document.querySelector(.btn).addEventListener(click,(){el.classList.add(animate-spin);// 动画结束后移除类el.addEventListener(animationend,(){el.classList.remove(animate-spin);},{once:true});});6. 动画性能优化优先使用这些属性触发 GPU 合成不引起重排transform位移、旋转、缩放opacity避免动画化这些属性触发重排性能差width、height、top、left、margin、paddingborder-widthwill-change 提示.animated-element{will-change:transform,opacity;}不要滥用will-change动画结束后应移除否则占用 GPU 内存。减少动画prefers-reduced-motionmedia(prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}7. transition vs animation 对比特性transitionanimation触发方式需要状态变化如 hover自动播放可循环复杂度两个状态之间的过渡多关键帧任意状态数循环不能可以 infinite方向A → BA → B → C → D适用悬停、切换等交互反馈加载、装饰性动画动手练习练习1打字机效果实现文字逐个显示的打字机动画。提示用steps()时间函数配合宽度动画。keyframestyping{from{width:0;}to{width:100%;}}.typing{overflow:hidden;white-space:nowrap;animation:typing 3ssteps(20)forwards;}练习2交错淡入一组卡片依次淡入每张延迟 0.1s。提示用:nth-child(n)设置不同animation-delay。练习3环形加载器用纯 CSS 创建一个三个圆点依次放大缩小的加载动画。常见误区 ⚠️误区正确做法动画化 width/height/top/left用 transform 和 opacity性能高 10 倍忘记 forwards 导致动画跳回初始状态需要保持结束状态时加animation-fill-mode: forwards无限循环动画滥用 will-change仅在必要时使用结束后移除忽略 prefers-reduced-motion必须做无障碍降级animation-delay 用正数实现交错用负数更高效-0.1s表示从 10% 开始速查卡片 /* 定义 */keyframesname{0%{...}50%{...}100%{...}}/* 应用 */animation:name 1s ease 0s 1 normal forwards;animation:name duration timing-function delay iteration-count direction fill-mode;/* 常用组合 */animation:fadeIn 0.5s ease-out forwards;animation:spin 0.8s linear infinite;animation:pulse 1.5s ease-in-out infinite alternate;animation:bounce 0.5s ease-in-out 3;/* 性能 */will-change:transform,opacity;/* 提示浏览器优化 *//* 无障碍 */media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}扩展阅读MDN: CSS 动画MDN: keyframesAnimate.css常用动画库CSS Tricks: Animation