显示 40 多个动画纺车的有效方式

Question

用户可以通过拖放上传 40 个文件。设计师希望每个项目都有一个纺车。我正在使用 css 动画，但我想知道是否有更有效的方法来减少浏览器的渲染工作。

CSS

@keyframes spinning {
 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(360deg);
 }
}

Answer 1

正如@Balázs 所说，transform 属性是高效的，您可以做的事情不多。

这是来自其他 Stackoverflow 帖子的摘要（当然是底部的链接）：

1. 使用 will-change 属性 (MDN reference)
2. 使用 Chrome DevTools 框架模式查看页面上发生的情况以及可以删除的内容

您可能想看看这些参考资料：

• Improving CSS3 transition performance
• High Performance Animations - HTML5 Rocks
• Smooth as butter: Achieving 60 FPS Animations with CSS3