css 动画如何制作
CSS 动画制作方法
使用 @keyframes 定义动画
通过 @keyframes 规则定义动画的关键帧，指定动画在不同时间点的样式变化。例如，定义一个从红色渐变到蓝色的动画：
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}应用动画到元素
使用 animation 属性将定义好的动画应用到元素上，可以设置动画的持续时间、延迟、重复次数等参数：
.element {
animation: colorChange 3s ease-in-out 1s infinite alternate;
}colorChange：动画名称。3s：动画持续时间。ease-in-out：动画速度曲线。1s：动画延迟时间。infinite：动画无限循环。alternate：动画往返播放。
使用 transition 制作过渡效果
transition 用于在元素状态改变时（如悬停）添加平滑过渡效果：
.button {
background-color: green;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: orange;
}background-color：过渡的属性。0.5s：过渡持续时间。ease：过渡速度曲线。
结合 transform 实现复杂动画
transform 可以旋转、缩放、移动或倾斜元素，与动画结合实现更丰富的效果：
.box {
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}控制动画播放状态
通过 animation-play-state 控制动画的暂停或播放：
.element {
animation-play-state: paused; /* 暂停动画 */
}
.element:hover {
animation-play-state: running; /* 恢复播放 */
}多动画组合
一个元素可以同时应用多个动画，用逗号分隔：
.element {
animation: fadeIn 2s, moveRight 3s;
}
@keyframes fadeIn { /* 淡入效果 */ }
@keyframes moveRight { /* 向右移动 */ }注意事项
- 性能优化：优先使用
transform和opacity属性，这些属性不会触发重排（reflow），性能更好。 - 浏览器兼容性：检查
@keyframes和animation的浏览器支持情况，必要时添加前缀（如-webkit-）。 - 动画时长：避免过长的动画时间，通常 0.3s 到 2s 为宜，确保用户体验流畅。
