如何制作css动画
使用 CSS 关键帧动画（@keyframes）
定义动画的关键帧，通过 @keyframes 规则指定动画在不同时间点的样式变化。结合 animation 属性将动画应用到元素上。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}使用过渡效果（transition）
通过 transition 属性实现简单的状态变化动画，适用于交互效果（如悬停、点击）。定义需要过渡的属性和时间。
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}结合 transform 属性
利用 transform 实现平移、旋转、缩放等效果，常与动画或过渡配合使用。
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}控制动画的播放行为
通过 animation 的子属性调整动画的细节：
animation-delay: 延迟播放时间。animation-iteration-count: 播放次数（infinite表示无限循环）。animation-direction: 播放方向（如alternate来回交替）。
.box {
animation: bounce 0.5s ease-in-out 1s 3 alternate;
}响应式动画与性能优化
优先使用 transform 和 opacity 属性，这类动画可通过 GPU 加速提升性能。避免频繁触发重排（如修改 width、margin）。
.optimized-animation {
transform: translateX(100px);
opacity: 0.5;
transition: transform 0.2s, opacity 0.2s;
}使用 CSS 变量动态调整动画
通过自定义属性（CSS 变量）实现动画参数的动态修改，增强灵活性。
:root {
--anim-duration: 1s;
}
.item {
animation: pulse var(--anim-duration) infinite;
}动画与 JavaScript 交互
通过 JavaScript 动态添加/移除类名或修改 CSS 变量，实现动画的触发与控制。
document.querySelector('.element').classList.add('animate');.animate {
animation: slideIn 0.5s forwards;
}
