CSS动画实现
一、CSS 动画类型
1. Transition 过渡动画
- 作用：实现属性值的平滑过渡（常用于 hover 效果）。
- 核心属性：
transition-property：指定参与动画的属性（如width,background-color）。transition-duration：动画持续时间（单位：s/ms）。transition-timing-function：动画速度曲线（如linear,ease-in-out）。transition-delay：动画延迟时间。- 简写：
transition: [属性] [持续时间] [速度函数] [延迟时间]
示例：
.box {width: 100px;transition: width 0.5s ease-in-out 0.2s;
}.box:hover {width: 200px;
}
2. Animation 关键帧动画
- 作用：通过定义关键帧（
@keyframes）实现复杂动画。 - 核心属性：
animation-name：绑定的关键帧名称。animation-duration：动画总时长（单位：s/ms）。animation-timing-function：速度曲线。animation-delay：延迟时间。animation-iteration-count：播放次数（infinite表示无限循环）。animation-direction：播放方向（如alternate反向循环）。animation-fill-mode：动画前后状态（如forwards保留结束状态）。- 简写：
animation: [名称] [持续时间] [速度函数] [延迟] [次数] [方向] [填充模式]
示例：
@keyframes slide {0% { transform: translateX(0); }100% { transform: translateX(100px); }
}.box {animation: slide 2s ease-in 1s infinite alternate;
}
二、动画速度函数（Timing Function）
常见类型及效果
| 函数名 | 效果描述 | 示例代码 |
|---|---|---|
linear | 匀速（从开始到结束速度不变） | transition-timing-function: linear; |
ease | 默认值，先慢后快再慢（类似抛物线） | transition-timing-function: ease; |
ease-in | 慢速开始，逐渐加速 | transition-timing-function: ease-in; |
ease-out | 慢速结束，逐渐减速 | transition-timing-function: ease-out; |
ease-in-out | 开始和结束都慢速，中间加速 | transition-timing-function: ease-in-out; |
cubic-bezier(x1,y1,x2,y2) | 自定义贝塞尔曲线（通过在线工具生成） | transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); |
示例：自定义贝塞尔曲线
/* 使用在线工具（如 https://cubic-bezier.com/）生成曲线参数 */
.btn {transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
三、动画相关单位详解
1. 时间单位
| 单位 | 说明 | 动画场景示例 |
|---|---|---|
s | 秒（1s = 1000ms） | transition: 0.5s |
ms | 毫秒 | animation-delay: 200ms |
示例：
/* 持续时间为 2.5 秒 */
animation-duration: 2.5s;/* 延迟 300 毫秒后开始 */
animation-delay: 300ms;
2. 长度单位
| 单位 | 说明 | 动画场景示例 |
|---|---|---|
px | 像素（绝对单位） | transform: translateX(100px) |
em | 相对字体大小 | font-size: 1.2em 的过渡 |
rem | 相对根元素字体大小 | 响应式布局中的平滑缩放 |
% | 百分比（相对父元素或视口） | 宽度从 50% 到 100% 的过渡 |
vw/vh | 视口宽度/高度的百分比 | 全屏动画效果 |
ch | 字符宽度（基于当前字体） | 文本动画的动态调整 |
示例：
/* 宽度从 50% 到 100% 的过渡 */
.box {width: 50%;transition: width 0.5s ease;
}.box:hover {width: 100%;
}
3. 角度单位
| 单位 | 说明 | 动画场景示例 |
|---|---|---|
deg | 度数（如 360deg） | rotate(45deg) |
rad | 弧度（如 π rad） | 复杂旋转动画 |
turn | 圈数（如 0.5turn） | 360° 旋转的简洁写法 |
示例：
/* 旋转 45 度 */
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}
四、动画性能优化技巧
-
使用硬件加速：
- 添加
transform或opacity属性，触发 GPU 渲染。 - 示例：
will-change: transform;
- 添加
-
避免过度绘制：
- 减少同时动画的元素数量，优先优化关键路径。
-
选择合适的属性：
- 避免直接动画化
width、height（触发重排），优先使用transform或opacity。
- 避免直接动画化
五、动画控制属性详解
| 属性 | 说明 | 示例 |
|---|---|---|
animation-play-state | 暂停/恢复动画（paused / running） | .box:hover { animation-play-state: paused; } |
animation-fill-mode | 控制动画前后状态 | forwards（保留结束状态） |
示例：
/* 动画结束后保留最终状态 */
.box {animation: slide 2s ease-in 1s infinite alternate;animation-fill-mode: forwards;
}
六、混合动画（Transition + Animation）
- Transition：适合简单交互（如按钮 hover）。
- Animation：适合复杂序列（如加载图标、路径动画）。
示例：
/* Transition 实现按钮悬停效果 */
.button {background-color: #ccc;transition: background-color 0.3s ease;
}.button:hover {background-color: #333;
}/* Animation 实现无限旋转的加载动画 */
.spinner {animation: spin 1s linear infinite;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}
七、兼容性处理
- 使用
-webkit-前缀（如-webkit-animation）确保兼容性，但现代浏览器已广泛支持标准属性。
八、调试工具
- Chrome DevTools：动画面板可实时查看关键帧和时间线。
- Firefox 动画调试器：分析动画性能与关键帧。
九、单位与属性的关联
| 单位类型 | 常见属性 | 示例 |
|---|---|---|
时间单位 (s/ms) | transition-duration, animation-duration, animation-delay | transition: 0.5s |
长度单位 (px/%/rem) | transform, width, height | transform: translateX(50px) |
角度单位 (deg/rad) | rotate, skew | rotate(45deg) |
十、总结
- 推荐实践：优先使用
transform和opacity实现高性能动画。 - 性能优化：避免直接动画化
width、height，减少重排。 - 复杂动画：使用
@keyframes定义关键帧，结合animation属性控制行为。