css制作动画
CSS 动画基础
使用 @keyframes 定义动画关键帧，通过 animation 属性将动画应用到元素。
@keyframes slide-in {
from { transform: translateX(-100%); }
to { 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）。
复合写法示例
.element {
animation: pulse 2s ease-in-out 0.5s infinite alternate;
}关键帧百分比控制
定义多阶段动画：
@keyframes color-change {
0% { background: red; }
50% { background: yellow; }
100% { background: green; }
}结合变形与过渡
通过 transform 和 transition 实现平滑效果：
.button {
transition: transform 0.3s ease, background 0.2s;
}
.button:hover {
transform: scale(1.1);
background: #ff9900;
}性能优化建议
- 优先使用
transform和opacity，避免触发重排。 - 启用硬件加速：
transform: translateZ(0)。 - 减少动画复杂度，避免过多图层叠加。
浏览器兼容性
- 现代浏览器均支持 CSS3 动画。
- 前缀兼容旧版浏览器（如
-webkit-、-moz-）。
通过组合关键帧和动画属性，可实现从简单过渡到复杂交互效果的各类动画。
