首页 > 代码库 > Css的transform和transition

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:动画形式

Css的transform和transition