css3动画制作
CSS3 动画基础
CSS3 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、循环次数等）。
关键帧语法示例：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}动画属性示例：
.element {
animation: slideIn 1s ease-in-out 0.5s infinite alternate;
}slideIn：动画名称。1s：动画持续时间。ease-in-out：缓动函数（控制速度曲线）。0.5s：延迟时间。infinite：无限循环（可选2等具体次数）。alternate：往返播放（可选normal或reverse）。
常用动画效果示例
1. 淡入效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.5s; }2. 旋转效果
@keyframes spin {
to { transform: rotate(360deg); }
}
.spin { animation: spin 2s linear infinite; }3. 弹跳效果
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 0.5s ease-in-out 3; }控制动画的进阶属性
animation-fill-mode：定义动画结束后的状态（如forwards保留最后一帧）。animation-play-state：通过 JavaScript 动态控制（如paused暂停动画）。- 多动画组合：用逗号分隔多个动画名称和参数。
示例：
.box {
animation:
fadeIn 1s forwards,
slideIn 0.5s ease-out 1s;
}性能优化建议
- 优先使用
transform和opacity，这些属性不会触发重排（性能更高）。 - 避免频繁动画影响性能，可使用
will-change: transform;提示浏览器优化。 - 使用硬件加速：如
transform: translateZ(0);。
浏览器兼容性
- 现代浏览器（Chrome、Firefox、Safari、Edge）均支持 CSS3 动画。
- 前缀兼容（如
-webkit-）逐渐不再必要，但可通过工具（Autoprefixer）自动添加。
通过结合关键帧和动画属性，可以实现复杂的交互效果，适用于按钮反馈、页面过渡等场景。
