css transform、transition、animate的区别

阅读数:10 评论数:0

跳转到新版页面

分类

html/css/js

正文

css中写动画时,经常会用到这几个属性。

一、transform 2D转换效果

transform属性是静态属性,需要配合transition和animation才能展现出动画效果。

正常变换矩阵是$\left[ \begin{array}{3} a &b &tx\\ c &d &ty \\ u &v &w \end{array} \right] $

但在二维空间中操作,u v w都为1.0,所以transform中的matrix函数使用6个参数:

matrix(a,b,c,d,tx,ty)。

1、转换操作

(1)平移 translate(tx,ty)

$\left[ \begin{array}{3} 1 &0 &tx\\ 0 &1 &ty \\ 0 &0 &1 \end{array} \right] $

(2)缩放 scale(sx,sy)

$\left[ \begin{array}{3} sx &0 &0\\ 0 &sy &0 \\ 0 &0 &1 \end{array} \right] $

(3)旋转 rotate(q)

$\left[ \begin{array}{3} cos(q) &sin(q) &0\\ -sin(q) &cos(q) &0 \\ 0 &0 &1 \end{array} \right] $

(4)倾斜或裁剪 skew(skx,sky) (2.5D效果)

$\left[ \begin{array}{3} 0 &sky &0\\ skx &0 &0 \\ 0 &0 &1 \end{array} \right] $

2、指定转换的起点transform-origin

接受两个参数,前一个参数表示水平产坐标,后一个参数表示垂直坐标,初始值为 50% 50%。

值可以是百分比、长度值,也可以几个关键字。

第一个参数关键字可以是left center right,后一个参数的关键字可以是top middle bottom。

二、transition

是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本。

1、transition-property

指定要进行过渡的属性的名称,指定多个时,中间使用逗号隔开。

2、transition-duration

过渡时长,单位可以s、ms,为负值时,被认为是0。

3、transition-timing-function

过渡时间曲线。

(1)cubic-bezier(x1,y1,x2,y2)

(2)linear 同等于cubic-bezier(0,0,1,1)

(3)ease 同等于cubic-bezier(0.25,0.1,0.25,1)

(4)ease-in 同等于cubic-bezier(0.42,0.1,1,1)

(5)ease-out 同等于cubic-bezier(0,0,0.58,1)

(6)ease-in-out同等于cubic-bezier(0.42,0,0.58,1)

4、transition-delay

延迟多长执行。

三、transform-style

transform-style: flat | preserve-3d 

其中flat值为默认值,表示所有子元素均在2D平面呈现,即使子元素沿着X轴或Y轴做了旋转有了3D效果也不呈现出来,preserve-3d表示所有子元素的3D效果能呈现出来。