1. The principle of browser rendering
The browser rendering process is summarized in 7 words: three trees plus three steps
Three trees
(1) Build an HTML tree (DOM) based on HTML
(2) Build a CSS tree (CSSOM) based on CSS
(3) Combine two trees into a render tree (render tree)
Three steps
(1) Layout (document flow, box model, calculation size and position)
(2) Panint drawing (draw the border color, text color, shadow, etc.)
(3) Compose (display the picture according to the stacking relationship)
How to update the style
The first one,
div.remove() will trigger the current hour and other elements relayout
The second, skip the layout and
change the background color, directly repaint+composite
The third, skip layout and paint to
change transform, just composite
Check which way the attribute triggered: https://csstriggers.com/
2. CSS animation (transition and animation)
Transition
作用
补充中间帧
语法：
transition: 属性名 时长 过渡方式 延迟
transition: left 200s linear
可以用逗号分隔两个不同属性
transition: left 200ms, top 400ms
可以用all代表所有属性
transition: all 200ms
过渡方式
有很多种，用到时再在MDN查询
并不是所有属性都能过渡
display:none => block 没法过渡
一般改成visibility： hidden => visible
过渡必须要有起始 —— 一般只有一次动画.或者两次
比如hover和非hover状态的过渡
如何控制中间点
（1）使用两次transition
.a === transition ===> .b
.b === transition ===> .c
用setTimeout或监听transitionend事件得到中间点
（2）使用animation
①声明关键帧
②添加动画
如何让动画停在最后一帧
①CSS animation stop at end
②加 forwards
animation
时长 1s或1000ms
过渡方式 和transition取值一样
次数 3/2.4/infinite
方向 reverse/alternate/alternate reverse
填充模式 none/forwards/backwards/both
是否暂停 paused/running
Three, experience
What css needs is imagination, not logic
. The attributes given by css are very simple, but can be combined very complex