css 动画制作
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的持续时间、速度曲线等。
定义关键帧：
@keyframes slide-in {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}应用动画：
.element {
animation: slide-in 1s ease-in-out;
}常用动画属性
animation-name：绑定@keyframes名称。animation-duration：动画时长（如2s）。animation-timing-function：速度曲线（如ease、linear）。animation-delay：延迟启动时间。animation-iteration-count：播放次数（infinite表示无限循环）。animation-direction：播放方向（alternate来回播放）。
示例：
.box {
animation: bounce 0.5s ease-in-out 0.5s infinite alternate;
}动画效果示例
淡入效果：
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-element {
animation: fade-in 1.5s;
}旋转动画：
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}性能优化建议
- 优先使用
transform和opacity，这些属性不会触发重排（性能开销小）。 - 避免频繁触发重绘的属性（如
box-shadow）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
硬件加速示例：
.optimized {
transform: translateZ(0); /* 触发GPU加速 */
}进阶技巧
多动画组合：
.element {
animation: fade-in 1s, slide-up 0.5s 1s;
}暂停与播放控制：
通过 JavaScript 动态修改 animation-play-state：
document.querySelector('.element').style.animationPlayState = 'paused';响应式动画：
使用媒体查询调整动画参数：
@media (max-width: 600px) {
.element { animation-duration: 0.8s; }
}通过灵活组合关键帧和动画属性，可以实现复杂的交互效果。
