动画为网页注入生命力，使界面不再是静态的“死图”。通过微妙的过渡效果（如按钮悬停、菜单展开），用户能获得即时的视觉反馈，明确感知到自己的操作已被系统识别 ，显著提升用户体验、增强视觉吸引力。
css动画和js动画的区别
| 对比维度 | CSS 动画 | JavaScript 动画 |
|---|---|---|
| 实现方式 | 通过 @keyframes 关键帧和 transition 过渡来定义动画。开发者只需在样式表中声明动画的起止状态和持续时间，浏览器自动处理中间过程 | 通过编程方式控制元素的样式或属性随时间变化。常用方法包括 requestAnimationFrame、setInterval 或借助动画库如 GSAP、Velocity.js 等 |
| 性能表现 | 通常由浏览器的合成器（compositor）在独立线程中运行，利用 GPU 加速，性能更优，尤其适用于简单的变换（如 transform 和 opacity）。它不阻塞主线程，因此不会影响页面其他部分的渲染 | 运行在主线程中，如果计算量大或主线程繁忙，可能会导致丢帧和卡顿。但通过 requestAnimationFrame 可以优化性能，使其与屏幕刷新率同步 |
| 控制能力 | 功能相对有限，无法实现复杂的交互控制。例如不能在动画中途暂停、反转或跳转到特定时间点。CSS 动画更适合声明式的简单动画效果 | 提供更强的控制力，可以动态控制动画的播放、暂停、回放、终止等，并且能根据用户行为或其他实时数据变化做出响应。适合需要复杂逻辑和交互的动画 |
| 兼容性与维护性 | 现代浏览器支持良好，但在低版本浏览器中可能存在兼容性问题。代码简洁，易于维护 | 兼容性较好，尤其在使用现代 API 如 requestAnimationFrame 时。但复杂逻辑可能导致代码冗长，维护难度增加 |
| 适用场景 | 适合简单、预设的动画效果，如按钮悬停、菜单展开、加载提示等。对于固定模式的动画，CSS 更加高效且易于维护 | 适合需要动态调整、交互性强或复杂逻辑驱动的动画，如视差滚动、路径动画、物理模拟等。当动画依赖用户输入或实时数据时，JS 更具优势 |
常见动画
| 动画类型 | 核心目标 | 典型应用场景 | 用户感知关键词 |
|---|---|---|---|
| 微交互动画 | 提供即时操作反馈 | 按钮点击/悬停效果、开关切换、点赞/收藏提示、表单验证成功或失败反馈、下拉刷新动画 | 确认、响应、控制感 |
| 加载等待动画 | 缓解等待焦虑，管理感知时间 | 页面首次加载、内容区块加载（骨架屏）、数据提交处理中、进度条/环形加载指示器 | 耐心、预期、信心 |
| 状态过渡动画 | 维持视觉连续性与注意力连贯 | 页面切换、模态框弹出/关闭、列表项增删重排、卡片展开为详情页 | 连贯、叙事感、平滑 |
| 空间导航动画 | 阐明信息层级与空间关系 | 导航菜单展开（如汉堡菜单滑入）、侧边栏推拉、标签页切换、层级联动动效（如树形展开） | 导向性、空间感、理解清晰 |
| 视觉吸引力动画 | 塑造品牌调性，增强情感连接 | 首屏视差滚动、动态背景（粒子/渐变）、吉祥物互动、数据可视化动态呈现、促销弹窗特效 | 吸引、愉悦、记忆点 |
小结
- 如果你追求的是简单、声明式、高性能的动画，CSS 是更好的选择。
- 如果你需要高度控制、复杂交互或动态逻辑的动画，则应优先考虑 JavaScript。
- 我们日常项目基本不需要高度控制、复杂交互或动态逻辑的动画，通常需求是简单过渡、抖动、loading、bounce等，所以css动画是更好的选择。
CSS动画
CSS 动画是一种强大的前端技术，通过 @keyframes 和 animation 属性可以创建丰富的视觉效果。合理使用 CSS 动画可以提升用户体验，但需注意性能优化和浏览器兼容性。结合实际需求选择合适的动画类型，并遵循最佳实践，可以让动画效果更加流畅自然。
CSS动画属性
1. animation 简写属性
综合控制动画的所有参数，语法：
animation: 名称 时长 时间函数 延迟 迭代次数 方向 填充模式 播放状态;
2. 子属性详解
| 属性 | 描述 | 可选值 |
|---|---|---|
animation-name | 动画名称（对应 @keyframes） | 自定义名称 / none |
animation-duration | 动画持续时间 | 时间值（如 1s、500ms） |
animation-timing-function | 动画速度曲线 | ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier() |
animation-delay | 动画开始延迟 | 时间值（如 0s、2s） |
animation-iteration-count | 动画重复次数 | 数字 / infinite（无限循环） |
animation-direction | 动画播放方向 | normal（正向） / reverse（反向） / alternate（交替） / alternate-reverse（反向交替） |
animation-fill-mode | 动画结束后状态 | none / forwards（保持结束状态） / backwards（应用开始状态） / both |
animation-play-state | 动画播放状态 | running（运行） / paused（暂停） |
3. 多动画同时播放
可以在一个元素上同时应用多个动画，用逗号分隔：
.element {
animation:
动画1 2s ease-in-out infinite,
动画2 3s linear infinite;
}
4 常见动画分类
4.1 硬件加速动画
-
定义：使用
transform和opacity等属性，触发 GPU 加速的动画。 -
特点：性能优异，流畅度高
-
适用场景：需要高性能的动画，如游戏、复杂交互
-
示例：
.element { transform: translateZ(0); /* 触发硬件加速 */ animation: slide 1s ease-in-out; }
4.2 软件渲染动画
-
定义：使用
width、height、position等可能触发重排的属性的动画。 -
特点：性能相对较低，可能导致卡顿
-
适用场景：简单动画，对性能要求不高的场景
-
示例：
@keyframes move { 0% { left: 0; } 100% { left: 100px; } }
5 常见动画效果
5.1 淡入淡出
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
5.2 缩放
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
5.3 旋转
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
5.4 平移
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
6 性能优化
-
优先使用
transform和opacity：这两个属性不会触发重排（reflow），性能更好 -
避免使用
position: absolute动画：可能导致频繁重排 -
使用
will-change：提示浏览器优化动画.element { will-change: transform; } -
减少动画复杂度：避免同时运行过多动画
-
使用硬件加速：通过
transform: translateZ(0)触发
7 浏览器兼容性
-
现代浏览器：直接支持（Chrome、Firefox、Safari、Edge）
-
旧版浏览器：可能需要添加前缀
@-webkit-keyframes 动画名称 { /* WebKit 浏览器 */ } @keyframes 动画名称 { /* 标准语法 */ }
8 最佳实践
-
合理设置动画时长：避免过长或过短的动画
-
使用
animation-fill-mode: forwards：保持动画结束状态 -
结合
transition：简单过渡效果使用transition，复杂动画使用animation -
测试不同设备：确保动画在各种设备上表现一致
-
考虑用户偏好：尊重
prefers-reduced-motion媒体查询@media (prefers-reduced-motion: reduce) { .element { animation: none; } }
9 注意点
CSS 动画的 transform 属性是一个复合属性，它包含了多个变换函数（如 scale、rotate、translate 等）。当多个动画同时修改 transform 时，浏览器会按照动画的优先级和时间线来处理，但通常会导致冲突，因为 transform 的值是一个完整的变换列表，无法被部分覆盖。
