显示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