浏览器渲染步骤

构建HTML树（DOM）
有样式的元素构建CSS树（cssom）
两颗树合并渲染树(render tree)(隐藏不需要渲染的分支)
layout布局(文档流，盒模型，大小位置)(无更改可略过)
paint绘制（边框文字颜色，阴影）(无更改可略过)
Compose合成（根据层叠关系展示画面）

CSS动画

transform

多种变换可以同时使用

tramsform:rotate(45deg) translateX/Y(50px);

translate

移动

X/Y轴

transform:translateX/Y(50px);

Z轴

在当前图上套一个.wrapper

.wrapper{

perspective:1000px;

border:1px solid black;

}

transform:translateZ(50px);图像去到离视点50px地方

缩写

transform:translate(50px,50px)//x,y

transform:translate3d(50px,50px,100px)//x,y,z

例子

绝对居中

position:abosolute;
left:50%;
top:50%;
tramsform:tramslate(-50%,-50%)

scale

变形,会改变border，而且图像变模糊，一般不用

transition:1s all;调节速度

tramsform:scale(1.5)

缩写：scaleX/Y===>scale（x，y）

rotate

tramsform:rotate(45deg)

默认rotateZ

XY也可

rotate3d太复杂

小菊花加载可用

skew

倾斜，用的少

transition

作用

过渡，补充中间帧

出来也有动画

使用

transition(属性名时间过渡方式延迟)

方式：linear匀速、ease缓动，ease-in淡入，ease-out淡入

不可过渡

不是所有都能过渡

display:block==>display:none;图像突然消失

缓慢消失

visibility:visible==>visibility:hidden

opacity:1==>opacity:0;(看不见但实际上还存在，结束后移除) backgroung可以渐变

animation

关键帧+动画

animation:1.5s xxx forward;停在最后，不反回(时间放在前面)

完整语法

#heart{animation: 1s heart infinite alternate;}

@keyframes heart {
 0% { transform: scale(1.0); }
 100% { transform: scale(1.5);
 }
}

CSS 知识总结