css3动画制作
CSS3 动画制作方法
关键帧动画（@keyframes）
通过 @keyframes 定义动画序列，结合 animation 属性实现动态效果。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease-in-out;
}过渡效果（transition）
使用 transition 实现属性变化的平滑过渡，需触发条件（如 :hover）。
.box {
width: 100px;
transition: width 0.5s ease;
}
.box:hover {
width: 200px;
}动画属性详解
animation-name: 绑定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease,linear）。animation-delay: 延迟启动时间。animation-iteration-count: 播放次数（infinite表示循环）。animation-direction: 播放方向（alternate往返播放）。
复合属性示例
.element {
animation: pulse 2s ease-in-out 0.5s infinite alternate;
}多动画叠加
同一元素可叠加多个动画，用逗号分隔。
.element {
animation:
fadeIn 1s ease-out,
rotate 3s linear infinite;
}性能优化建议
- 优先使用
transform和opacity，避免触发重排。 - 启用硬件加速：
transform: translateZ(0)。 - 减少高频动画的使用（如
box-shadow变化）。
浏览器兼容性
- 前缀处理：
-webkit-（Chrome/Safari）、-moz-（Firefox）。 - 可通过工具（如 Autoprefixer）自动添加。
