CSS关键帧动画怎么定义？@keyframes用法详解

CSS关键帧动画的核心在于正确使用@keyframes声明可复用的动画轨迹——需命名合法、关键帧位置用from/to或0%/100%精确标记、所有属性值必须带单位（如translateX(100px)而非translateX(100)），但真正让动画跑起来的关键，是严格绑定animation-name（名称大小写、连字符须完全一致）和非零的animation-duration；常见“不动”的原因往往不是语法错误，而是声明未调用、初始态与0%帧重合导致回弹、或误用left/height等触发布局的高成本属性引发掉帧——掌握这些隐藏规则，才能让动画既精准又流畅。

怎么用 @keyframes 定义一段基础动画轨迹

直接写名字 + 花括号，里面用百分比或 from/to 标记关键帧位置。名字不能带空格、不能以数字开头，比如 slide-in 可以，1st-anim 不行（会解析失败）。

常见错误是漏写单位：比如把 transform: translateX(100) 写成 translateX(100) —— 缺少 px 或 %，浏览器直接忽略这一帧。

• from 等价于 0%，to 等价于 100%，二者可混用，但别写 from 和 0% 重复定义
• 中间帧（如 50%）必须落在 0–100% 范围内，120% 会被忽略
• 同一关键帧里写多个属性（opacity、transform、color）没问题，但不支持 display 切换（display: none 在关键帧中无效）

为什么动画没跑？检查这三处硬性限制

@keyframes 本身只是声明，不触发任何效果；必须配合 animation-name 和 animation-duration 才能生效。光写关键帧，DOM 元素上没挂 animation 相关属性，等于写了函数没调用。

• 名字拼错最常见：animation-name: slideIn 但 @keyframes 声明的是 slide-in —— 大小写、连字符、下划线全要严格一致
• animation-duration 为 0s 或未设置，动画不会播放（哪怕 animation-iteration-count 是 infinite）
• 元素初始状态和 0% 关键帧完全一致，且没设 animation-fill-mode，可能看起来“动了一下就回弹”，其实是按默认 none 行为执行的

animation-timing-function 怎么影响关键帧之间的过渡

它不控制关键帧“什么时候出现”，而是决定两帧之间**怎么动**——是匀速、先快后慢，还是抖两下。默认是 ease（缓入缓出），不是线性。

• linear：匀速，适合机械感强的位移（比如进度条填充）
• ease-in-out：开头结尾都慢，中间快，适合模态框淡入淡出
• 自定义贝塞尔曲线：cubic-bezier(0.34, 1.56, 0.64, 1) 超出 [0,1] 范围是允许的，能做出弹性/回弹效果
• 注意：step-start / step-end 会让动画变成“逐帧跳变”，不插值 —— 适合数字翻牌、加载点动画等场景

兼容性和性能要注意的关键点

所有现代浏览器都支持标准 @keyframes，但老版本 Android WebView（≤4.3）或 iOS Safari ≤8 需要 -webkit- 前缀。不过现在基本可忽略前缀，除非明确要兼容 2015 年前的设备。

性能上，频繁变更 left/top 触发重排，而 transform 和 opacity 走合成层，更安全。所以关键帧里优先用 transform: translateX() 而不是 left: 100px。

• 避免在关键帧里改 height、width、margin 等触发布局的属性
• 大量元素同时播复杂关键帧动画，可能卡顿；可用 will-change: transform 提前提示浏览器优化（但别滥用）
• @keyframes 无法访问 JS 变量，也不能嵌套或条件生成；需要动态控制时，得靠 JS 操作 style.animationName 或切换 class

关键帧动画看着简单，真正卡住人的地方往往不在语法，而在「声明了但没绑定」「绑定了但初始态吃掉了第一帧」「用了高成本属性导致掉帧」——这些细节不报错，但就是不动或动得不对。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~