如何制作css动画
使用 CSS @keyframes 定义动画
通过 @keyframes 规则定义动画的关键帧，指定动画在不同时间点的样式变化。关键帧使用百分比或 from/to 表示动画进度。
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}应用动画到元素
通过 animation 属性将动画绑定到元素，需指定动画名称、持续时间、时间函数等参数。
.element {
animation: slideIn 1s ease-in-out;
}控制动画播放方式
通过 animation 子属性调整动画行为：
animation-iteration-count: 播放次数（如infinite表示循环）。animation-direction: 播放方向（如alternate表示来回播放）。animation-delay: 延迟播放时间。animation-fill-mode: 控制动画结束后的样式（如forwards保留最后一帧）。
.element {
animation-name: slideIn;
animation-duration: 2s;
animation-iteration-count: infinite;
}使用 CSS 过渡（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 2s linear infinite;
}优化性能
优先使用 opacity 和 transform 这类高性能属性，避免触发重排（如 width、margin）。使用 will-change 提示浏览器优化。
.optimized {
will-change: transform;
}
