在这篇文章中，我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的，以便使你在写一些动画效果之前就可以对该动画在浏览器中运行效果有一个心理预判。有了这些预判，你就可以设计出一些在浏览器中运行流畅的动画效果，从而带来更流畅的用户体验。
浏览器的内部工作
让我们了解一些浏览器的工作原理，一探究竟。一旦我们了解了浏览器是如何工作的，我们就可以更好的去驾驭它。
现代浏览器通常拥有两个重要的执行线程，这两个线程相互配合来渲染出页面：
主线程
排版线程
通常情况下，主线程主要负责以下工作：
运行JavaScript
计算HTML元素的CSS样式
布局页面
把页面元素绘制成一个或多个位图
把这些位图移交给排版线程
通常情况下，排版线程主要负责以下工作：
通过GPU渲染位图，并显示在屏幕上
向主线程请求更新位图的可见部分或即将可见的部分
判断出当前页面处于可见的部分
判断出即将通过页面滚动而可见的部分
随着用户滚动页面来移动这些部分（译者注：可见部分的和即将可见的部分）
当长时间运行JavaScript或渲染一个很多的元素时，主线程会一直处于忙碌状态。在这期间它不会对用户的输入做出任何反应。
在另一方面，排版线程对用户输入保持着非常快的响应。当页面变化时，排版线程尝试以每秒60帧的速度去重绘页面，即便这时页面还不完整。
举例来说，当用户滚动页面时，排版线程向主线程请求更新页面新显示部分的位图，但是，如果此时主线程并不能迅速响应请求，排版线程并不会去等待响应，它会用它目前所拥有的这部分页面的内容去渲染页面，由于对应的内容还没有，所以会以白板的形式渲染出来。
GPU
我前边提到过排版线程通过GPU把位图绘制到了屏幕上。让我们快速的过一下GPU相关的东西。
GPU是一种芯片，在今天的大多数手机，平板以及电脑中都能发现它的身影。它是非常专业的，这意味着GPU在某些方面非常擅长，但是在另外一些方面去表现不好。
GPU比较擅长于：
绘制位图到屏幕
重复的绘制同一个位图
在不同的位置，以不同的旋转角度，或者不同的缩放大小来绘制同一个位图。
GPU相对慢的地方：
将位图加载到显存里。
transition: height
现在我们已经在软件层面和硬件层面对如何渲染页面有了一个粗略的认识。接下来，让我们看一下浏览器的主线程和排版线程是如何协同工作来完成一个CSS Transition的。
假设我们想要将一个元素的高度值从100px转换到200px，如下所示：
新闻热点
疑难解答
