css动画如何制作
使用 @keyframes 定义动画
通过 @keyframes 规则定义动画的关键帧，指定动画在不同时间点的样式状态。例如：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}定义了一个从透明到不透明的渐变动画。
应用动画到元素
使用 animation 属性将动画绑定到目标元素，需指定动画名称、持续时间等参数：
.element {
animation: fadeIn 2s ease-in-out;
}支持的其他属性包括 animation-delay（延迟）、animation-iteration-count（循环次数）等。
使用 transform 和 transition 实现简单动画
通过 transform 改变元素位置、旋转或缩放，结合 transition 实现平滑过渡：
.button {
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}适用于悬停等交互效果。
通过 JavaScript 控制动画
动态添加或移除 CSS 类来触发动画：
element.classList.add('fadeIn');或使用 Web Animations API 更精细地控制动画播放：
element.animate([
{ opacity: 0 },
{ opacity: 1 }
], { duration: 1000 });性能优化建议
优先使用 opacity 和 transform，这类属性不会触发重排或重绘，性能更高。避免在动画中频繁修改 width、height 或 margin 等属性。
响应式动画适配
通过媒体查询调整动画参数，确保在不同设备上的体验一致：
@media (max-width: 768px) {
.element { animation-duration: 1s; }
}示例：组合动画
以下代码实现元素淡入并向右移动的效果：
@keyframes slideAndFade {
0% { opacity: 0; transform: translateX(-50px); }
100% { opacity: 1; transform: translateX(0); }
}
.box {
animation: slideAndFade 1.5s forwards;
}通过以上方法，可以灵活实现从简单到复杂的 CSS 动画效果。
