在这篇文章中，我们将探讨如何浏览器处理CSS动画和css，这样你可以写一些动画效果之前有一个动画的运行在浏览器中的心理预期。这些偏见，你可以设计一些流畅的动画效果在浏览器带来更流畅的用户体验。
浏览器的内部工作
让我们看看浏览器是如何工作的。一旦我们知道浏览器是如何工作的，我们就能更好地管理它。
现代浏览器通常有两个重要的执行线程，这两个线程互相匹配以呈现页面：
主线程
排版线程
一般来说，主线程负责以下工作：
运行Javaｓｃｒｉｐｔ
计算html元素的CSS样式
网页布局
画一个页面元素到一个或多个位图
将这些图片排版线程
一般来说，排版线程主要负责以下工作：
通过GPU渲染位图并在屏幕上显示
请求主线程更新位图的可见部分或可见部分。
确定当前页处于可见部分。
确定将要通过页面可见的部分。
当用户滚动页面移动这些部分（译者注：可见部分和可见部分）
当您长期运行Javaｓｃｒｉｐｔ或呈现大量元素时，主线程将始终处于忙碌状态。在此期间，它不会响应用户的输入。
另一方面，排版线程保存用户输入的快速反应。页面变化时，排版线程试图重绘页面的速度为每秒60帧，即使页面是不完整的。
例如，当用户滚动页面布局的主线程，线程请求更新页面显示部分的位图，但如果主线程并不能快速响应的要求，而不是等待排版线程的响应，它将与这部分的页面是目前所有的内容页面，因为没有相应的内容，所以会在白板的形式呈现。
GPU
我提到了一个排版线程，它通过GPU将位图绘制到屏幕上。
GPU是目前大多数手机、平板电脑和电脑中都能找到的芯片，它非常专业，这意味着GPU在某些方面非常好，但在其他方面表现不佳。
GPU更好：
将位图绘制到屏幕上
重复同一位图
同一位图在不同位置绘制，具有不同的旋转角度，或不同大小的缩放。
GPU相对较慢：
位图被加载到内存中。
过渡：高度
现在我们对如何在软件和硬件层中呈现页面有一个粗略的了解。接下来，让我们看看浏览器的主线程和排版线程是如何一起工作来完成CSS转换的。
假设我们想将一个元素的高值100px到200px，如下所示：
CSS代码将内容复制到剪贴板。
{ div
身高：100px；
转换：高度1s线性；
}
div：悬停{
身高：200px；
}
主线程和排版线程将根据下图所示的序列图完成这个转换。
你可以看到，有许多橙盒的全过程，这意味着浏览器有很繁重的工作要处理，这意味着这种转变可能会出现Caton。
在转换的每一个框架中，浏览器都必须重新排列、绘制页面，并将最新的位图对象加载到GPU上，正如我们以前所知道的，将位图对象加载到GPU内存中是一个相对缓慢的操作。
为什么浏览器要这么努力的工作在每一帧动画是元素的内容已经改变。改变元素的高度可能会导致其子元素的大小相应变化，所以浏览器必须进行调整。经过重新布局，主线程必须重新生成该元素的位图对象。
过渡：变换
可以看出，在高度上的转换性能相对较差，并且有一些性能更好的过渡
假设我们想将一个元素从大小的一半缩放到实际大小。假设我们使用CSS的转换属性进行缩放，并使用CSS的转换属性来生成缩放动画效果。
CSS代码将内容复制到剪贴板。
{ div
转换：规模（0.5）；
转换：转换1s线性；
}
div：悬停{
转换：规模（1）；
}
让我们看一下这个例子的序列图。
我们只看到几个橙色的盒子，这意味着这个动画的效果可能非常平滑！那么，元素的变换动画效果和它的高动画效果有什么区别呢
根据定义，CSS变换属性不改变元素的布局，也不影响它周围的元素。它将作为一个整体mdash；mdash；缩放整个元件，旋转整个单元，或将整个元素。
这对浏览器来说是个好消息！浏览器只需要在动画开始时生成元素的位图对象，并将其传递给GPU，之后，浏览器不需要再进行任何重新布局、页面绘制和位图对象的交付。相反，利用GPU出色的渲染特性，浏览器可以在不同的位置快速旋转或缩放同一位图对象。
设计决策
那么，这是否意味着我们不会减慢一个元素的高度呢不，在某些情况下，这是你设计效果的一部分，动画可以很快完成。也许动画的元素是孤立的，不会导致页面的其他部分被重新安排。也许这个元素只是重画，而浏览器能很快完成。也许这个元素非常小，所以浏览器只需要将小位图对象转移到GPU上。
当然，在不影响您的设计的视觉效果的情况下，最好是放慢一个更好的CSS属性，比如转换，而不是减慢性能较差的CSS属性，比如高度。当你点击它时，菜单就会出现。尝试放慢菜单的转换属性来显示它，而不是减慢它的顶部或高度属性来达到类似的效果。
动画上特别快的CSS属性包括：
CSS变换
css透明度
CSS过滤器（取决于过滤器和浏览器的复杂性）
目前，这个列表是非常有限的，但是随着浏览器的发展，你会看到越来越多的CSS属性在动画中越来越快。而且，不要忽视当前的列表。你可能会惊讶你可以通过组合这些属性来创造很多的效果！
