css 动画制作
CSS 动画基础
CSS 动画通过 @keyframes 和 animation 属性实现。@keyframes 定义动画序列，animation 控制动画的播放方式。
定义关键帧：
@keyframes example {
0% { opacity: 0; }
100% { opacity: 1; }
}应用动画：
.element {
animation: example 2s ease-in-out infinite;
}常用动画属性
animation 是以下属性的简写：
animation-name: 指定@keyframes名称。animation-duration: 动画时长（如2s）。animation-timing-function: 速度曲线（如ease、linear）。animation-delay: 延迟开始时间。animation-iteration-count: 播放次数（如infinite）。animation-direction: 播放方向（如alternate）。animation-fill-mode: 动画结束后的样式（如forwards）。
过渡动画（Transition）
CSS 过渡用于元素状态变化时的平滑效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}支持过渡的属性包括颜色、尺寸、位置等。
变换（Transform）
transform 实现元素的旋转、缩放、移动等效果：
.box {
transform: rotate(45deg) scale(1.2);
}常用函数：
translate(x, y): 移动元素。scale(x, y): 缩放。rotate(deg): 旋转。skew(deg): 倾斜。
性能优化建议
优先使用 transform 和 opacity，这类属性不会触发重排（reflow），性能更高。避免在动画中频繁修改 width、height 或 margin。
示例：弹跳动画
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 1s infinite;
}工具与资源
- 调试工具：浏览器开发者工具的
Animations面板。 - 生成器：使用在线工具如 Animista 快速生成代码。
- 库：Animate.css 提供预设动画类。
