css3知识总结

一.变换transform
   1： 移动translate（x，y）
        translateX()水平移动
        translateY（）垂直移动
  :2： 旋转rorate（）
        rorateX（数值+角度deg）绕x轴旋转
        rorateY（数值+角度deg）绕y轴旋转
        rorateZ（数值+角度deg）绕z轴旋转
        perspective透视
  3:  缩放scale（）等比例缩放

        2、scaleX(<number>)                                   
          3、scaleY(<number>)

   4: 扭曲skew

        2、skewX(<angle>)
        3、skewY(<angle>) 

二.改变元素基点transform-origin

三.animation

1:animation-name:    动画名称

（

animation-name: none | IDENT

IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开

）

2：animation-duration   动画持续时间

(取值:<time>为数值，单位为s （秒.）其默认值为“0”)

3:animation-timing-function:    动画速度

（animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | steps()）

4：animation-delay:    动画延迟时间

（取值为<time>为数值，单位为s(秒)，其默认值也是0）

5：animation-iteration-count  动画次数

（animation-iteration-count:infinite | <number>）

6：animation-direction    动画运动方向

（animation-direction: normal | alternate | reverse）

7：animation-fill-mode   动画填充模式

（

规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;

none  不改变默认行为。   

both  向前和向后填充模式都被应用。

forwards  当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards  在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值  （在第一个关键帧中定义）。

）

四.重绘和回流

什么是回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

他们的区别很大：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变.