CSS动画 - 掘金

浏览器渲染过程

第一步是处理HTML标记并构造DOM树
- DOM树描述了文档的内容。<html>元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM节点的数量越多，构建DOM树所需的时间就越长。
第二步是处理CSS并构建CSSOM树
- CSS对象模型和DOM是相似的。DOM和CSSOM是两棵树. 它们是独立的数据结构。浏览器将CSS规则转换为可以理解和使用的样式映射。浏览器遍历CSS中的每个规则集，根据CSS选择器创建具有父、子和兄弟关系的节点树。
第三步是将DOM和CSSOM组合成一个Render树
- 算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。每个可见节点都应用了其CSSOM规则。Render树保存所有具有内容和计算样式的可见节点，将所有相关样式匹配到DOM树中的每个可见节点，并根据CSS级联确定每个节点的计算样式。
第四步是Layout布局(文档流、盒子模型、计算大小和位置)
- 渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。
第五步是Paint(把边框颜色、文字颜色、阴影等画出来)
- 将各个节点绘制到屏幕上，第一次出现的节点称为first meaningful paint。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。
第六步是Compose(根据层叠关系展示画面)
- 文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

如何更新样式

一般使用JS更新样式

div.style.background = "red";
div.style.display = "none";
div.classList.add("red");
div.remove(); //删除节点

三种渲染方式

全部遍历一遍
- div.remove()会触发当前消失，其他元素relayout。
跳过layout
- 改变背景颜色，直接reprint+compose
跳过layout和print
- 改变transform，只进行compose

Transform & Animation

Transform

示例：

transform: translateX(10px) rotate(10deg) translateY(5px);

Transform四种常用功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

注意：inline元素不支持transform

transform的取值

transform属性可以指定为关键字值none 或一个或多个<transform-function>值。

要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
none

不应用任何变换。

transform-function的示例

位移 translate

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

缩放 scale

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

旋转 rotate

transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);

倾斜 skew

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad)

参考地址

Animation

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state属性的一个简写属性形式。

animation-name：规定需要绑定到选择器的 keyframe 名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
animation-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标。
animation-play-state：动画是否运行或者暂停。

animation 属性示例

animation: 3s ease-in 1s 2 reverse both paused slidein;

@keyframes

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

范例（跳动的心）

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="BeatingHeart.css">
<title>跳到的心</title>
</head>
<body>
<div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#heart {
    margin: 200px;
    display: inline-block;
    position: relative;
    animation: heart 1s infinite alternate;
}


#heart> .left {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50% 0 0 50%;
    position: absolute;
    bottom: 100%;
    right: 100%;
    transform: rotate(45deg) translateX(57px);
}

#heart> .right {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50% 50% 0 0;
    position: absolute;
    bottom: 100%;
    left: 100%;
    transform: rotate(45deg) translateY(57px);
}

#heart> .bottom {
    width: 100px;
    height: 100px;
    background: red;
    transform: rotate(45deg);
}

@keyframes heart {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.5);
    }
}

效果

BeatingHeart

参考地址