Css的transform和transition

Css的transform和transition

 

在移动端要加上-webkit-前缀，参数有

Rorate（45deg） //旋转45度

Scale（2） //缩放，接受从零到正无穷的数字

TranslateX（100px） //位移横向

TranslateY（100px） //纵向

SkewX/Y（） //斜切，不常用

 

先位移，在缩放，就会把位移值也缩放掉，所以属性先写那个后写那个是有影响的

 

Transform和translate不脱离文档流，不改变在文档流中的位置和大小

移动位置如果改变left和top，就是在不停地操作dom，性能差，所以建议用transform

 

 

Transition发生在元素样式发生改变的时候，给样式的改变添加一个过程

Transition-property：要动画的样式

Transition-duration：动画时间

Transition-delay：延迟时间

Transition-timeing-function：动画形式