CSS 动画相对于 JavaScript 动画来说，资源消耗较小，但仍然可以通过以下方法进一步优化：
transform 和 opacity 属性设置为 translate3d(0,0,0) 或 translateZ(0)，可以触发 GPU 加速，从而减轻 CPU 负担。.element {
animation: my-animation 1s linear infinite;
transform: translate3d(0, 0, 0);
}
@keyframes my-animation {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
简化动画：尽量减少动画的复杂性，例如减少关键帧的数量、简化样式变化等。
使用 requestAnimationFrame：虽然这不是 CSS 动画特有的方法，但在 JavaScript 动画中使用 requestAnimationFrame 可以让浏览器在下一次重绘之前执行指定的代码，从而实现更高效的动画效果。
避免使用大型背景图片：大型背景图片会增加资源消耗，尤其是在动画中。尽量使用简单的背景颜色或渐变。
优化动画性能：避免在动画过程中触发其他可能导致性能问题的 CSS 属性，例如 box-shadow、border-radius 等。
使用轻量级字体：如果动画中包含文本，尽量使用轻量级的字体，以减少渲染负担。
利用浏览器缓存：将 CSS 文件和关键帧动画存储在浏览器的缓存中，可以减少网络请求和加载时间。
代码压缩和优化：使用工具对 CSS 代码进行压缩和优化，以减小文件大小和提高加载速度。
