CSS笔记（动画变换）

一、设计2D变换

transform：none | <transform-function> [<transform-function>]*

<transform-function>

设置变化函数。

常用的变换函数的功能如下：

matrix()：定义矩阵变换，即基于X和Y坐标重新定位元素的位置

translate()：移动元素对象，即基于X和Y坐标重新定位元素

scale()：缩放元素对象，取值包括正数、负数和小数

rotate()：旋转元素对象，取值为一个度数值

skew()：倾斜元素对象，取值为一个度数值

1）定义旋转

rotate(<angle>)

2）定义缩放

scale(<number>[,<number>])

number取值正数将放大元素，负数将翻转元素（如文字反转），使用小于1的小数可以缩小元素

3）定义移动

translate（<translation-value>[,<translation-value>])

translation-value参数表示坐标值，第一个参数相对于原位置的x轴偏移距离，第二个参数相对于y轴偏移距离

4）定义倾斜

skew(<angle>[,<angle>])

<angle>表示角度值，第一个参数表示相对于x轴进行倾斜，第二个参数表示相对于y轴进行倾斜。

5）定义矩阵

matrix(<number>,<number>,<number>,<number>,<number>,<number>)

矩阵函数可以实现各种变换效果，如：倾斜（skew）、缩放（scale）、旋转（rotate）、以及位移（translate）。

其中第1参数控制x轴缩放，第2个参数控制x轴倾斜，第3个参数控制y轴倾斜，第4个参数控制y轴缩放，第5参数控制x轴移动，第6参数控制y轴移动。

ps：transform是一个复合属性

transform:translate(80,80) rotate(45deg) scale(1.5,1.5)

6）定义变换原点

CSS变换的原点默认为对象的中心点，如果想改变这个中心点，可以使用transform-origin属性进行定义。

transform-orgin属性可以接受两个参数，可以百分比，具体值，也可以是left、center、right或者top、middle、bottom。

二、设计3D变换

CSS3的3D变换包括以下几个函数

3D位移：translateZ（t）和translate3d（tx,ty,tz）函数

3D旋转：rotateX（a）、rotateY（a）、rotateZ（a）和rotate3d（x,y,z,a）

3D缩放：scaleZ（s）和scale3d（sx,sy,sz）函数

3D矩阵：包含matrix3d（）函数

1）定义位移

translate3d(tx,ty,tz)

tx：代表横向坐标位移向量的长度

ty：代表纵向坐标位移向量的长度

tz：代表Z轴位移向量的长度。此值不能为百分比

translateZ函数

translateZ(t)

，t为Z轴向量位移长度

2）定义缩放

scale3d(sx,sy,sz)

和

scaleZ(s)

取值为比例值

3）定义旋转

rotate3d（x,y,z,a）

x,y,z是一个0~1的数值

a是一个角度值

三、设计过渡动画

1）设置过渡属性（定义过渡动画的CSS属性名称）

transition-property:none | all | [<IDENT>][',' <IDENT>]*

none：表示没有元素

all：默认值，表示针对所有元素，包括：before和：after伪元素

IDENT：指定CSS属性列表。

2）设置过渡时间

transition-duration:<time>[,<time>]*

默认值为0，看不到过渡效果

3）设置延迟时间

transition-delay:<time>[,<time>]*

4）设置过渡动画类型

transition-timing-function属性用来定义过渡动画的类型

初始值为ease，取值简单说明如下：

ease：平滑过渡，等同于cubic-bezier（0.25，0.1，0.25，1.0）函数，即立方贝塞尔

linear：线性过渡，等同于cubic-bezier（0.0，0.0，1.0，1.0）函数

ease-in：由慢到快，等同于cubic-bezier（0.42，0，1.0，1.0）函数

ease-out：由快到慢，等同于cubic-bezier（0，0，0.58，1.0）函数

ease-in-out：由慢到快再到慢，等同于cubic-bezier（0.42，0，0.58，1.0）函数

cubic-bezier：特殊的立方贝塞尔曲线效果

5）设置触发方式

CSS3动画一般通过鼠标事件或状态定义动画，如CSS伪类和Javascript事件

动态伪类
作用元素
说明
:link
只有链接
未访问过的链接
:visited
只有链接
访问过的链接
:hover
所有元素
鼠标经过元素
:active
所有元素
鼠标点击元素
:focus
所有可被选中的元素
元素被选中

媒体查询

@media only screen and (max-width: 420px){

样式定义

}

四、设计帧动画

CSS3使用animation属性定义帧动画。

1、设置关键帧

@keyframes animationname  {

keyframes-selector{

css-styles;

}

}

animationname：定义动画的名称

keyframes-selector：定义帧的时间，合法的值包括1~100%、from（等价于0%）、to（等价于100%）

css-styles：表示一个或多个合法的CSS样式属性

2、设置动画属性

animation-name、animation-duration、animation-time-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode