CSS3 的动画了解多少？

css3 实现动画主要有 3 种方式

• transition 过渡动画
• transform 2D 和 3D 转换
• animation 自定义动画

⭐️ 说一下 transform 的原理，先平移在旋转和先旋转再平移有什么区别

• 先平移后旋转，并不会改变坐标轴方向
• 但是如果先旋转后平移，在旋转时坐标轴的方向也随着发生了改变
• 然后再平移，移动的方向也就发生了改变了

https://codepen.io/JingW/pen/dyqgqrv

⭐️ 所有 CSS3 的动画都能用 GPU 加速么 ？

在 CSS 中，只有 3D 转换、opacity 透明、filter 滤镜和添加了 will-change 属性的元素，浏览器才会开启硬件（GPU）加速。

• 不过如果我们想要 2D、过渡等动画也能开启硬件加速,我们可以通过给这些元素加上transform: translateZ(0); 或 transform: translate3d(0,0,0);来诱导浏览器开启硬件加速，但是我们不能滥用。
• 也可能通过添加 will-change 来实现。

为什么需要 GPU 硬件加速 ？

• CSS3 动画在移动多终端设备场景下，相⽐ PC 会⾯对更多的性能问题，主要体现在动画的卡顿与闪烁。
• 我们可以通过 GPU 硬件加速来解决这个问题

CPU 、GPU、硬件加速的关系?

• 硬件加速意味着图形处理单元（GPU）会协助你的浏览器渲染网页，做一些繁重的工作，而不是把这些工作全部丢给中央处理单元（CPU）来完成。
• 当一个 CSS 操作被硬件加速时，它的速度也会因为页面的渲染速度变快而得到提升。