利用css3制作动画
CSS3 动画基础
CSS3 通过 @keyframes 规则和 animation 属性实现动画效果。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、循环次数等）。
定义关键帧
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}from和to分别表示动画的起始和结束状态，也可用百分比（如0%,50%,100%）定义多阶段动画。
应用动画
.element {
animation: slide-in 1s ease-in-out 0.5s 3 alternate;
}- 简写属性
animation包含以下值（按顺序）：slide-in: 动画名称。1s: 持续时间。ease-in-out: 速度曲线（缓动函数）。0.5s: 延迟时间。3: 循环次数（infinite表示无限循环）。alternate: 方向（往返播放）。
常用动画属性
animation-name: 关键帧名称。animation-duration: 动画时长（如2s）。animation-timing-function: 缓动函数（如linear,ease,cubic-bezier(0.1, 0.7, 1, 0.1)）。animation-delay: 延迟启动时间。animation-iteration-count: 循环次数。animation-direction: 播放方向（normal,reverse,alternate）。animation-fill-mode: 动画结束后的样式（如forwards保留最后一帧）。
示例：淡入效果
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-element {
animation: fade-in 2s ease-out forwards;
}复杂动画：多关键帧
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}
.ball {
animation: bounce 0.5s infinite;
}性能优化建议
- 优先使用
transform和opacity属性，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width,margin）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
浏览器兼容性
- 现代浏览器均支持 CSS3 动画，旧版本需加前缀（如
-webkit-,-moz-）。可通过工具（如 Autoprefixer）自动生成。
