CSS 知识总结

1.浏览器渲染动画原理

• 根据HTML构建HTML树(DOM)
• 根据CSS构建CSS树(CSSOM)
• 将两棵树合并成一颗渲染树(rendertree)
• Layout布局(文档流、盒模型、计算大小和位置)
• Paint绘制(把边框颜色、文字颜色、阴影等画出来)
• Compose合成(根据层叠关系展示画面)

2.CSS 动画的两种做法

transform

通过transform的几个属性，搭配transition来达到动画效果
transform有4个常用功能：

• 位移translate:translateX(0px,0%),translateY(0px,0%);在坐标轴上进行平移
• 缩放scale:scale(0.8),表示缩小0.8倍\
• 旋转rotate:rotate(45deg),表示旋转45度\
• 倾斜skew:skewX(0px,0%)|skewY(0px,0%)

transition:补充中间帧 transition:all 1s; 表示所有属性过渡1S动画

animation

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

//表示位移100%

@keyframes identifier{
    0%{ top:0;left:0;}
    33%{ top:50px;}
    66%{left 50px;}
    100%{top:100px;left:100%}
}