浏览器渲染原理

浏览器在渲染一个页面的时候，有以下几个步骤：

由 HTML 构建 HTML 树（DOM）
由 CSS 构建 CSS 树（CSSOM）
将以上两棵树合并成一棵渲染树（Render Tree）
进行 Layout 布局（依据文档流、盒模型确定大小、位置）
进行 Paint 绘制（内容、色彩）
进行 Compose 合成（依层叠顺序呈现出来）

CSS 实现动画的方法，大体上可概括为 transition 法和 animation 法。

在介绍这两种方法前，先要介绍一个非常重要的属性——transform。

transform

transform 属性可以实现元素的平移、缩放、旋转、倾斜等效果（对 inline 元素无效）。

transform 属性常用的值有

translate() 可以对元素进行平移

transform: translateX(50px)               /* 向右平移50px */
transform: translateY(50%)                /* 向下平移自身高度的50% */
transform: translate(20px, 20px)          /* 向右、下分别平移20px */

scale() 对元素进行缩放

transform: sacleX(1.2)                     /* 宽放大为原来的1.2倍 */
transform: sacle(1.2)                      /* 宽、高均放大为原来的1.2倍 */

rotate() 对元素进行旋转

transform: rotate(60deg)                   /* 顺时针旋转60度 */

skew() 使元素发生倾斜

transform: skew(45deg)                     /* 倾斜45度 */

了解了 transform 的基本用法，就可以为元素添加动画了。

用 transition 实现动画

transition 就是过渡的意思，作用指定一个行为结尾，transition 会自动添加一个过渡效果。例如

div{
  height: 50px;
  width: 50px;
  border: 1px solid red;
  transition: transform 1s linear;
}
div:hover{
  transform: rotate(45deg);
}

当鼠标 hover 的时候，div 由原来的默认样式变为顺时针旋转45度，transition 使得这两种状态的转变用1s的时间去完成，期间自动补充了过渡动画。

transition 的值包括属性名、持续时间、过渡方式、延迟时间，通常来说属性名和持续时间是必须的。

属性名用以指定需要过渡的属性，all 表示所有属性
过渡方式是指，完成这一过渡所遵从的【进度-时间】函数关系模型，诸如匀速变化、先快后慢、先慢后快等等，CSS 提供了多种函数模型，如 linear、ease、ease-in、ease-out 等。

需要注意的是，并非所有的属性都支持过渡，像display: none-->display: block的变化就不支持，类似的需求可以用visibility: hidden-->visibility: visible代替。

用 animation 实现动画

transition 动画只能指定两种变化状态，即开始和结束，其中间的过程都由数学函数控制，而 animation 可以指定多个关键帧，相较而言更加灵活。

animation 的核心就是定义关键帧，这里用的是 @keyframes 语法，写法如下

@keyframes xxx{
    0% {样式一}
    10% {样式二}
    40% {样式三}
    ...
    100%{样式四}
}

或者

@keyframes xxx{
    from {样式一}
    to {样式二}
}

其中 xxx 为动画名字。

声明好关键帧之后，就可以使用 animation 属性为元素应用这个动画了

div{
    animation: xxx 1s infinite alternate-reverse; 
}

animation 的值包括动画名、时长、过渡方式、延迟、次数、方向等，具体用法参见 animation

CSS 动画

浏览器渲染原理

transform

用 transition 实现动画

用 animation 实现动画