CSS

css知识总结

浏览器渲染原理

• 浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM，如果有CSS，会根据CSS生成CSS对象模型，然后再由DOM和CSSDOM合并产生渲染树，知道了所有节点的样式，便根据这些节点以及样式计算他们在浏览器中确切的大小和位置，这就是布局，最后再把节点绘制到浏览器上。
• 解析HTML构建dom树，解析css构建css树----构建render树----布局render树----绘制render树

CSS 动画的两种做法（transition 和 animation）

1.transition 过渡

作用：补充中间帧

语法（transition: 属性名｜时长｜过渡方式｜延迟 ）

属性名：动画的名字 时长 ：1s 或者 1000ms，0.1s 或者 .1s

过渡方式：ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

延迟：3s 或者 3000ms，0.3s 或者 .3s

/transition: 属性名 时长 过渡方式 延迟/
transition: left 1s linear 3s

过渡必须要有起始，一般只有一次动画，或者两次，比如 hover 和 非 hover 状态的过渡

2.animation

语法（animation:时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名）

• 时长：1s 或者 1000ms
• 过渡方式：跟 transition 取值一样，如 linear
• 次数：3 或者 2.4 或者 infinite
• 方向：reverse | alternate | alternate-serverse
• 填充模式：none | forwards | backwards | both
• 是否暂停：paused | running

3.keyframes 完整语法

@keyframes name{
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }    
}

@keyframes name{
    0% {transform: translateX(0%);}
    50% {transform: translateX(50%);}
    100% {transform: translateX(100%);}
}