制作css动画
使用 CSS @keyframes 定义动画
通过 @keyframes 规则定义动画序列，指定从开始到结束的样式变化。例如，创建一个元素从左到右移动的动画：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}应用动画到元素
使用 animation 属性将动画绑定到目标元素，需指定动画名称、持续时间和其他可选参数：
.element {
animation: slideIn 1s ease-in-out forwards;
}slideIn：动画名称。1s：动画持续时间。ease-in-out：缓动函数（控制动画速度曲线）。forwards：保持动画结束状态。
控制动画的播放方式
通过 animation 的子属性调整动画行为：
.element {
animation-name: slideIn;
animation-duration: 2s;
animation-delay: 0.5s;
animation-iteration-count: infinite; /* 循环播放 */
animation-direction: alternate; /* 往返播放 */
}使用 transform 和 opacity 优化性能
优先使用 transform 和 opacity 制作动画，这些属性可通过 GPU 加速，避免布局重绘：
@keyframes fadeAndScale {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}响应式动画与媒体查询
结合媒体查询调整动画参数，适应不同屏幕尺寸：
@media (max-width: 600px) {
.element {
animation-duration: 0.5s;
}
}示例：悬停触发动画
通过 :hover 伪类实现交互式动画：
.button {
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}调试工具
使用浏览器开发者工具（如 Chrome DevTools）的 Animations 面板检查时间轴和缓动函数，优化动画效果。
