第 24 篇：CSS Animation 关键帧动画 —— 纯 CSS 实现自动动效，摆脱定时器依赖

前言上一篇 transition 只能做「状态切换过渡」必须依靠 hover、点击等触发如果想要自动循环、持续播放、分段变化的动画加载转圈、文字浮动、轮播渐变、渐入横幅就需要 CSS animation 关键帧动画。 很多简单自动特效不用写 JS 定时器纯 CSS 即可实现性能更好、代码更简洁。本篇拆解 animation 完整语法给博客新增加载动画、横幅文字浮动、卡片入场渐显三大特效。一、核心概念keyframes 关键帧keyframes 用来定义动画每一个阶段的样式变化0% 是动画起始100% 是动画结束中间可设置 20%、50% 等分段状态。 基础模板css/* 定义名为float的浮动动画 */ keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }定义完成后通过 animation 属性绑定给任意元素即可播放。二、animation 完整属性拆解cssanimation: 动画名 时长 缓动 延迟 播放次数 播放方向 填充模式;常用参数说明动画名和 keyframes 名称对应时长如 3s、0.8s缓动函数ease /linear匀速播放次数数字3/infinite无限循环播放方向alternate往返播放不用写反向关键帧填充模式forwards动画结束后停在最后一帧最简无限浮动写法cssanimation: float 3s ease-in-out infinite alternate;三、三大博客实战动效直接复制使用实战 1页面加载转圈动画替换 JS 加载提示CSS 代码css/* 定义旋转动画 */ keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { width: 40px; height: 40px; border: 4px solid #eee; border-top-color: #409eff; border-radius: 50%; animation: rotate 1s linear infinite; margin: 20px auto; }HTML 直接使用html预览div classloading/div无需一行 JS实现标准转圈加载图标替换之前文字加载提示页面更美观。实战 2Banner 标题上下浮动动画给博客顶部大标题添加柔和上下浮动提升页面氛围感csskeyframes bannerFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } .banner h1 { animation: bannerFloat 4s ease-in-out infinite alternate; }实战 3页面打开卡片渐入入场动画页面加载完成后文章卡片从下方淡入滑入增强页面打开层次感csskeyframes cardShow { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .article-card { animation: cardShow 0.6s ease forwards; }四、animation 与 transition 核心区别表格特性transition 过渡animation 关键帧动画触发方式鼠标 hover、JS 切换类名等主动触发页面加载自动播放可无限循环阶段控制仅起始、结束两个状态可自定义 0%~100% 任意分段样式循环播放无法自动循环支持 infinite 无限循环适用场景按钮、卡片、链接 hover 状态变化加载动画、浮动、自动轮播、入场动画五、动画性能优化 新手避坑动效优先使用 transformopacity不会触发页面重排性能最优不要频繁修改 width/height/top/left页面不要添加过多无限循环动画低端手机会出现卡顿infinite 循环动画时长建议 3~5 秒速度更柔和舒适动画名称禁止中文、空格纯英文命名页面隐藏的元素记得关闭动画减少资源占用。六、本篇结语掌握 transitionanimation 两套 CSS 动效体系后你已经可以独立完成网页 99% 的视觉动态效果部分场景可简化甚至移除 JS 定时器兼顾页面美观与性能。 我们的博客页面从静态纯文字页面升级为拥有入场动画、悬浮渐变、自动浮动、加载动效的高品质展示网站。 下一篇将开启 Git 版本控制入门学会代码备份、版本回滚解决代码误删、多版本混乱问题为项目上线、代码管理打下基础。