码迷,mamicode.com
首页 > Web开发 > 详细

Css的transform和transition

时间:2016-11-28 23:11:28      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:ansi   ora   延迟   移动   就会   cal   webkit   性能   web   

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

标签:ansi   ora   延迟   移动   就会   cal   webkit   性能   web   

原文地址:http://www.cnblogs.com/cjie/p/6111605.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!