1、浏览器渲染原理

学习基础的CSS知识之前先了解一下浏览器的渲染原理,这样有利于我们更好的理解CSS代码背后的逻辑。

渲染步骤

1、根据HTML构建HTML树(DOM树)

2、根据CSS构建CSS树(CSSOM)

3、将两颗树合并成一颗渲染树(render tree)

4、Layout布局(文档流、盒模型、各个对象的大小及位置)

5、Paint绘制(把边框颜色、文字颜色、阴影等效果“画”出来)

6、Compose合成(根据层叠关系展示画面)

下图是一个简单的示例来自谷歌开发者平台,包括包含静态DOM和内部样式

Document Object Model(DOM)

DOM

style.css

style.css

当浏览器要加载这个页面时会先将页面解析成DOM树和CSSOM数。

render tree

2、CSS动画中transition和animation的用法及优缺点

2.1 transition

作用

补充中间帧

语法:

transition:属性名 时长 过渡方式 延迟

transition:left 200ms linear

可以用逗号隔开两个不同属性

transition:left 200ms,top 400ms

可以用all代表所有属性

transition:all 200ms

过度方式:

linear

ease

ease-in

ease-in-out

ease-out

step-start

step-end

cubic-bezier

steps

PS:并非所有的属性都能过渡

如display:none=>block

改成visibility:hidden=>visible即可

过渡必须有起始

2.2 animation

语法:

animation:时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名;

时长:1s/1000ms

过渡方式:同transition如linear

次数:可以是小数或者infinite(无限)

方向:reverse|alternate|alternate-reverse

填充模式:none|forwards|backwards|both

是否暂停:paused|running

@keyframes

关键帧指动画序列中特定的节点画面,通过规则控制动画的进程及效果达到较为理想的画面

语法:

from to

@keyframes slidein {
 from {
   transform: translateX(0%);
}

 to {
   transform: translateX(100%);
}
}

百分数

@keyframes identifier {
 0% { top: 0; left: 0; }
 30% { top: 50px; }
 68%, 72% { left: 50px; }
 100% { top: 100px; left: 100%; }
}

关键帧中出现: !important 会忽视!important

3、transition与animation的区别

transition是由元素变化而触发的,无论这个触发是不是我们想要的,只要属性改变了就会触发。

animation的触发则是我们设置的,我们在规定值下指定我们想要的规则即可,可以一开始执行也可以只执行一次然后固定效果。

就效果而言animation具有更优秀的细节控制能力,可以在一次动画过程中出现多次转折更容易开发者定量控制。而transition则相对的粗糙一点,变化较为单一。

anime是一个优秀的开源轻量级的JS animation 库,里面有众多常见动画效果的demo演示示例。