css中动画制作
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如时长、次数、方向等）。
关键帧定义
@keyframes 动画名称 {
0% { /* 起始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}示例：元素从左向右移动
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}动画属性
通过 animation 简写或分属性控制动画：
.element {
animation: 动画名称 时长 速度曲线 延迟 次数 方向 填充模式;
}分属性示例：
.element {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}动画属性详解
-
animation-name
指定@keyframes定义的动画名称。 -
animation-duration
动画持续时间（如2s、500ms）。
-
animation-timing-function
速度曲线：ease（默认，先慢后快再慢）linear（匀速）ease-in（加速）ease-out（减速）cubic-bezier()自定义曲线（如cubic-bezier(0.1, 0.7, 1.0, 0.1)）。
-
animation-delay
动画开始前的延迟时间（如1s）。 -
animation-iteration-count
播放次数：- 数字（如
3） infinite（无限循环）。
- 数字（如
-
animation-direction
播放方向：
normal（默认，正向播放）reverse（反向播放）alternate（正反交替）alternate-reverse（反反正交替）。
-
animation-fill-mode
动画结束后的样式保留：none（默认，恢复初始状态）forwards（保留结束状态）backwards（应用第一帧状态）both（结合前后状态）。
-
animation-play-state
控制播放状态：running（默认，播放）paused（暂停）。
示例：跳动效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.box {
animation: bounce 1s ease-in-out infinite;
}多动画组合
一个元素可同时应用多个动画：
.element {
animation:
slide 2s ease-out,
fade 1.5s linear;
}性能优化建议
- 优先使用
transform和opacity属性，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width、height）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
浏览器兼容性
现代浏览器均支持 CSS 动画。如需兼容旧版本，可添加前缀：
@-webkit-keyframes slide { /* Chrome/Safari */ }
.element {
-webkit-animation: slide 2s;
}通过灵活组合关键帧和动画属性，可实现复杂的交互效果，如加载动画、页面过渡等。
