20-CSS过渡

一、transition过渡属性

1、复合属性(设置到一起)

transition：all 2s linear 2s;

all指监听的该div的所有属性，可以指定一个属性
2s是指动画效果完成时间
linear 匀速，默认值
2s 延迟2s才变


注：display:none/block 不支持display这个属性的过渡

例：

设置在父盒子上，监听height变化，复合属性中不能并列写多个监听属性，要么一个(height)，要么所有（all）

2、单一属性

复合属性：
transition:all 5s linear 3s;

单一属性：
//检索或设置对象中的参与过渡的属性
transition-property:all; 
//检索或设置对象过渡的持续时间
transition-duration:5s
//检索或设置对象延迟过渡的时间
transition-delay:3s
//检索或设置对象中过渡的动画类型
transition-timing-function:linear

二、怎么实现display：none到block的过渡呢？

增加overflow:hidden;溢出隐藏，默认不现实。鼠标移入后慢慢展开

三、速度属性

使用方法：
（1）复合属性设置：

transition：all 2s ease;   #前边两个值可以变

（2）单一属性

transition-timing-function:ease;

四、tranform：translate

将元素向指定方向移动

向左移动:
tranform:translateX(-100px)
向右移动：
tranform:translateX(100px)
向上移动:
tranform:translateY(-100px)
向右下角移动：
tranform:translate(100px 200px;)
往右移自身宽度的100%:
tranform:translateX(100%) 

常用用法：
动画效果中盒子内默认不显示的元素初始时设置transform:translateX/Y()移出盒子，等到用户点击时transform:translateX/Y(0px)移入盒子。

五、记住

1、position和transform区别

在使用position进行动画效果移动时，会出现动画效果不流畅的问题，是因为在GPU渲染时，导致大量回流重排，transform是在独立涂层渲染，不会导致浏览器回流重拍，动画效果流畅。

原理：
position设置top/left、margin、padding等的控制位置的变化都会导致浏览器的回流重排，即使position定位脱离文档流，在GPU渲染时会在合成图层进行渲染，导致浏览器重排

设置translate，脱离文档流，GPU渲染时不会在合成涂层上渲染，会在独立涂层上渲染。在浏览器层面和GPU层面都是独立涂层渲染。

2、浏览器什么情况下会创建一个独立涂层呢？

1. 3D 或css transform
2. video视频标签
3. CSS filters属性
4. 元素覆盖时，比如z-index

3、总结

1、transform 会使用 GPU 硬件加速，性能更好；position + top/left 会触发大量的重绘和回流，性能影响较大。

2、硬件加速的工作原理是创建一个新的复合图层，然后使用合成线程进行渲染。

3、3D 动画 与 2D 动画的区别；2D动画会在动画开始和动画结束时触发2次重新渲染。

4、使用GPU可以优化动画效果，但是不要滥用，会有内存问题。

六、tranform:scale缩放

1、scale放大

同样会使GPU在独立图层进行渲染，性能高。
使原有动画默认从中心位置放大x倍显示

scale为一个值表示从x轴和y轴同时放大：

//图片变小为0.5倍
tansform:scale(0.5)

//图片倒放为1.5倍
tansform:scale(-1.5)

只从某一个方向单独放大

scaleX()
scaleY()

单方向缩放，图片会变形，一般不用。

2、改变中心点

transform-origin：center;默认中心位置
left top 左上角
left bottom
left center
right top
...

transform-origin：left top;

3、position和scale相比

scale优势：
效果美观、回流重排影响小，单独涂层进行渲染，性能好

例：移入从中心位置慢慢变大，移走慢慢变小，并且溢出隐藏

七、旋转

transform:rotate(80deg) 平面内顺时针旋转
transform：rotateX()  3维平面内沿x轴旋转
transform：rotateY()
transform：rotateZ() 

可以通过transform-origin改变旋转点

八、transform多属性写到一起时要主意顺序

位移和放大，先写位移后放大
位移和旋转，先位移后旋转，否则沿着x轴位移会走偏

九、倾斜

transform:skew(30deg,30deg) 
skew(30deg,30deg) 正值，往右下角拉
skewX 正值，表示拽盒子右下角，往右边拉动，形成30deg
负值，拽左下角，往左拉动
skewY  正值，表示拽盒子右下角，往下边拉动
负值，拽左下角，往下拉动

transform:skewX(30deg)

弊端：
必须是在和用户交互时(鼠标点击、移入)才会发生改变