css制作的动画
CSS动画基础
CSS动画通过@keyframes规则和animation属性实现。@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: bounce 2s ease-in-out 0.5s infinite alternate;
}过渡动画（Transition）
CSS过渡通过transition属性实现状态间的平滑变化，需触发条件（如:hover）。
.button {
background: blue;
transition: background 0.3s, transform 0.5s;
}
.button:hover {
background: red;
transform: scale(1.1);
}性能优化建议
- 优先使用
transform和opacity属性，它们可通过GPU加速。 - 避免频繁触发重排（如修改
width、margin）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
复杂动画示例
结合多个@keyframes和属性实现动态效果：
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fade {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.spinner {
animation: rotate 2s linear infinite, fade 3s ease-in-out infinite;
}响应式动画技巧
通过媒体查询调整动画参数：
@media (max-width: 600px) {
.element { animation-duration: 1s; }
}
