css3边框交替动画_CSS3动画

特别说明一小下。文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者 感激不尽！

这个动画内容有点水。因为不是往这个动画方向走。基本上很难使用得上，使用上都是很简单的操作，所以内容有点水，而且也很难一个个的说明 只有自己亲手做一做怕是才能懂得过来哦！！

目录：

浏览器渲染原理：
网页浏览器的渲染原理：
0.1 根据HTML构建HTML树 (DOM)
0.2 根据CSS构建CSS树 (CSSOM)
0.3 将这两棵树嘞合并起来，变成一颗即将要被渲染的树（render tree）
0.4 layout 布局（文档流、盒模型、计算大小和位置）
0.5 paint 绘制（把边框颜色、文字颜色、阴影等画出来）
0.6 Compostie 合成（根据层叠关系展示画面）
浏览器 三种渲染流程
第一种：全走之后渲染（就是0.1-0.6这些步骤都走一边，什么情况下全走？第一次制作的时候，或者全部发生了改变。）
第二种：跳过布局渲染（什么情况下跳过布局呢？就是布局没有发生改变）
第三种：跳过布局 和 绘制 直接渲染
可以通过一个挺牛逼的网站，来查看CSS的那些属性触发以上的流程

https://csstriggers.com/

简单来说一下，竖着的英文，代表了各个浏览器使用的 内核 代表作 （从左到右）谷歌、火狐、苹果、最新的IE，有颜色的部分就会触发，没有颜色的部分并不会触发。

1 transition过渡属性：
1.1 transition: all 5s;
1.2 transition-property:
1.3 tansition-duration：
1.4 transition-timing-function：
1.5 transition-delay：
1.2 1.3 1.5 目前只做稍微一点了解
1.4 要理解下
2 转换
2.1 2d 转换 transform 属性有：
transform 本身就是转换的意思
transform:translate 移动