CSS动画详解及transform、transition、translate的区别

刚看完一节慕课网的css动画，在此总结下

1. 先说下 transform、transition、translate的区别

　　transform 和 transition是css的2个属性，translate属于transform里的一个方法；

2.语法：

transform有4个方法，分别是translate平移、rotate旋转、scale缩放、skew斜切

transition有4个值（默认是前2个值）：property(指定css属性的name)、duration（动画持续时间）、timing-function(切换动画的速度)、delay(动画执行前的延迟时间)

3. 用法:

translate有2个参数，代表x轴和y轴, 只有1个参数时，只在x轴移动，y轴默认是0；transform: translate(10px,10px)

　　　　-ms-transform:translate(x,y); /*IE9*/
　　　　-moz-transform:translate(x,y); /*Firefox*/
　　　　-webkit-transform:translate(x,y); /*Safari和chrome*/
　　　　-o-transform:translate(x,y); /*Opera*/

rotate(1800deg)参数值为正数顺时针旋转，值为负数逆时针旋转； transform:rotate(90deg)
transform-origin:0 0 ; 设置旋转的中心点，默认是（0,0）
scale(x,y) x轴和y轴缩放，第二个参数没有默认取第一个参数的值，scale(0.5)参数值小于1缩小，scale(1.5)参数值大于1放大； transform:scale(1.2)
skew(x,y) 斜切用法和rotate类似，在x轴和y轴同时进行角度扭曲，第二个参数没有时默认为0，不进行斜切； transform: skew(90deg,10deg)

　　　　skew一般不建议使用，可以用 skewX(值) 和 skewY(值) ，但是skew(x,y)的效果不等于skewX加上skewY的效果。

　　　　skewX(xdeg), 表示在x轴倾斜的度数，如果度数为正，表示元素沿水平方向（X轴）顺时针倾斜；如果度数为负，表示元素沿水平方向（X轴）逆时针倾斜

　　　　skewY(ydeg)类似

　　　　这个属性不太好理解，总结一下就是

　　　　　　（1）skewX()方法会保持高度，沿着X轴倾斜；

　　　　　　（2）skewY()方法会保持宽度，沿着Y轴倾斜；

　　　　　　（3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；

transition-property: none| all | property ; all表示所有属性都有过渡效果，property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
transition-duration: time值；默认是0 没有动画效果，以秒或者毫秒计
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

/* transition: width|height|opacity|all 2s ease-in 2s ; property和duration是必须值，后2个参数可以省略*/

4. transform的4个方法叠加使用时，先做偏移，在做其他

　　transform: translateX(100%) scale(0.5);

5. 景深

　　perspective: 80px;

值越小，代表的是我们离物体越近，一般使用500-800；

巴特西

CSS动画详解及transform、transition、translate的区别

最新文章

热门文章