本文探讨了如何使用JS和CSS实现高性能3D动画，强调变换和透明度在动画中的作用，以及手动优化和声明式动画的重要性。通过创建复合层和利用Web Animation API，开发者可以提高动画流畅度并解决性能问题。
动画在现代站点中最重要的用途之一是提供用户反馈和连续性。在用户进行交互时，内容应该明显变化，但变化应该平滑过渡，这样用户才可以直观地理解新旧状态的关系。
变换
「变换」为元素提供了无限的可能性：位置可以改变 、大小也可以通过缩放 改变、还能旋转、斜切甚至 3D 变换。
就是在某些场景下，开发者需要换一种思考方式，通过使用变换减少重排和重绘。
透明度
另外，透明度可变意味着开发者可以控制元素的可见程度。多多思考应用透明度的场景 -- 比如直接给元素的阴影 (box-shadow) 做动效很可能会造成严重的性能问题。
手动优化
还有一个好消息 — 开发者可以选择想要控制的属性，创建复合层，并将元素拖到该层。通过手动优化，确保元素总能被绘制好，这也是通知浏览器准备绘
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
