一. 浏览器渲染原理
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流，盒模型，计算大小和位置)
- Paint绘制（把边框颜色，文字颜色，阴影等画出来）
- Compose合成（根据层叠关系展示画面）
二. CSS 动画的两种做法（transition 和 animation）
(一)transition
四个常用功能
- 位移: translate
- 缩放: scale
- 旋转: rotate
- 倾斜: skew
经验
- 一般都需要配合transition过渡
- inline元素不支持transform，需要先变成block
1. transform之translate
常用写法
- translateX(<length-percentage>)
- translateY(<length-percentage>)
- translate(<length-percentage>,<length-percentage>?)
- translateZ<length>且父容器perspective
- translate3d(x,y,z)
经验
- 要学会看懂MDN的语法示例
- translate(-50%,-50%)可做绝对定位元素的居中
2. transform之scale
常用写法
- scaleX(<number>)
- scaleY(<number>)
- scaleZ(<number>,<number>?)
3. transform之rotate
常用写法
- rotate([<angle>|<zero>])
- rotateZ([<angle>|<zero>])
- rotateX([<angle>|<zero>])
- rotateY([<angle>|<zero>])
- rotate3d复杂
经验
- 一般用于360度旋转制作loading
- 用到时再搜索rotateMDN看文档
4. transform之skew
常用写法
- skewX([<angle>|<zero>])
- skewY([<angle>|<zero>])
- skew([<angle>|<zero>],[<angle>|<zero>]?)
经验
- 用的较少
- 用到时再搜skewMDN文档
5. transform多重效果
组合使用
- transform:scale(0.5)transflate(-100%,-100%)
- transform:none;取消所有
注意(transition过渡)
1.作业
- 补充中间帧
2. 语法
- transiton:属性名 时长 过渡方式 延迟
- transition:left 200ms linear
- 可以用逗号分隔两个不同属性
- transiton:left 200ms, top 400ms
- 可以用all代表所有属性
- transition:all 200ms
- 过渡方式:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
并不是所有属性都能过渡
- display:none=>block没法过渡
- 一般改成visibility:hidden=>visible
- display和visibility的区别
- background颜色可以过渡
- opacity的透明度可以过渡
过渡必须要有起始
一般只有一次动画,或者两次,比如hover和非hover状态的过渡,但是如果想要有中间点.有两种办法
1.使用两次transform
- .a===transform===>.b
- .b===transform===>.c
- 如何知道到了中间点呢?
- 用setTimeout或者监听transitionend事件
2.使用animation
- 声明关键帧
- 添加动画
如何让动画停在最后一帧
- 搜索css animation stop at end
- 加个 forwards
