117笔记问答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 代码进行压缩和优化，以减小文件大小和提高加载速度。