210127 浏览器渲染过程与CSS动画的两种创建方式

浏览器渲染HTML页面的过程:

【果冻公开课】CSS教程第四课：浏览器渲染HTML页面的过程（上）.

首先是dom构造，浏览器把接收到的html代码通过html解析器，构建成一颗DOM树，下一步把接收到的css代码，通过css解析器构建出样式表规则，放到对应的DOM树节点上，得到一个有样式属性的DOM树，

第二步进行布局，浏览器按从上到下，从左到右的顺序，读取DOM树文档节点，排布文档流，然后计算节点的坐标和大小和css属性，这就将节点布局到了页面，

第三步：绘制页面，把内容都绘制出来，将其可视化出来，完成整个页面的渲染合成

动画部分

两种动画创建方式

1. transform

transform有很多的属性，包括平移(translate)， 放大（scale）， 旋转（rotate）， 旋紧（skew）

其中

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transform MDN

transform可以简写：

<transform-function> = <matrix()> | <translate()> | <translateX()> | 
<translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | 
<skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | 
<translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | 
<rotateY()> | <rotateZ()> | <perspective()>

多个属性叠加在一起，
同时在被添加的节点元素上，可以追加一个transition属性，用来定义动画的过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

transition MDN

2. animation

如果采用了 animation的这种做法，首先就需要定义好一个关键帧数（keyframes）集合, 然后 给要添加动画的节点添加一个属性

animation: name duration timing-function delay iteration-count direction fill-mode;

name就是关键帧数对应起的名字，
MDN中关于animation各属性的讲解

2.1 keyframes的两种写法

2.1.1 from-to写法

@keyframes beats {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
	}

2.1.1 %写法

@keyframes beats {
            0% {
            top: 0px;
            left: 0px;
            background: red;
        }

        25% {
            top: 50px;
            left: 50px;
            background: blue;
        }

        50% {
            top: 100px;
            left: 100px;
            background: yellow;
        }

        75% {
            top: 150px;
            left: 150px;
            background: green;
        }

        100% {
            top: 200px;
            left: 200px;
            background: red;
        }
    }

了解了 关于animation-fill-mode的属性值的相应含义

截图自：animation-fill-mode属性.

练习了一个跳动的心的动画：

http://js.jirengu.com/najihohuye/1/

复习了：

相对定位和绝对定位：
主要看 1.相对于谁定位 2.是否释放原来的位置

【果冻公开课】CSS教程第四课：浏览器渲染HTML页面的过程（上）.