CSS3变形

1、变形简介：CSS3变形是一些效果的集合，如平移，旋转，缩放，倾斜效果，每个效果都可以称为变形（transform）， 它们可以操控元素发生平移，旋转，缩放，倾斜等变化。

2、CSS3变形的语法：

transform:[transform-function];

3、设置变形函数，可以是一个，也可以是多个，中间以空格分开。

（1）translate()：平移函数，基于X，Y坐标重新定义元素的位置。

（2）scale()：缩放函数，可以使任意元素对象尺寸发生变化。

（3）rotate()：旋转函数，取值是一个度数值。

（4）skew()：倾斜函数，取值是一个度数值。

4、2D变形：

（1）2D位移：当translate（）函数只有一个值的时候，则表示水平位移；如果只设置垂直位移；就必须设置第一个 参数为0，第二个值是垂直偏移量。

translate(tx,ty);

（2）2D缩放：该函数包含两个参数值，默认值为1。只有一个值时，第二个默 认值和第一个相等。

scale(sx, sy)
scale(sx)

（3）2D倾斜：会改变元素的形状。

skew(ax, ay)
skew(ax)

（4）2D旋转：不会改变元素的形状。

rotate(a)    /*a的取值为正值，元素相对原来中心顺时针旋转*/

CSS3过渡

1、过渡简介：transform呈现的是一种变形的结果，而transition呈现的是一种过渡，是一种动画转换的过程，如渐现，渐弱，动画快慢等。CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。

2、过渡属性的使用：

transition:[transition-property transition-duration transition-timing-function transition-delay]

（1）过渡属性：transition-property属性用来定义转换动画的CSS属性名称，常用属性：

ident：指定的CSS属性，如width，height，background-color属性等
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all。

（2）过渡所需的时间：transition-duration属性用来定义转换动画的时间长度，即从设置从旧属性到新属性所花费的时间，单位为s。

（3）过渡动画函数：transition-timing-function属性用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。

ease：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（默认值）。
linear：元素样式从初始状态过渡到终止状态时速度恒速（匀速）。
ease-in：元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果）。
ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢（渐隐效果）。
ease-in-out：元素样式从初始状态过渡到终止状态时速度先加速再减速（渐显渐隐效果）。

（4）过渡延迟时间：transition-delay属性指定

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发。
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断。
0：默认值，元素过渡效果立即执行。

3、过渡的触发机制 ：

（1）伪类触发：hover、active、focus、checked等。

（2）媒体查询：可以通过@media属性判断设备的尺寸，方向等。

（3）JavaScript触发：用JavaScript脚本触发。

4、使用transition实现过渡动画的使用步骤：

（1）在默认样式中声明元素的初始状态样式。

（2）声明过渡元素最终样式状态，如悬浮状态。

（3）在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3动画

1、transition和animation在实现动画的方式上的区别

（1）transition属性通过指定属性的初始状态和结束状态在两个状态之间进行平滑过渡的方式来实现动画。

（2）animation实现动画主要由两个部分组成。通过类似Flash动画的关键帧来声明一个动画。在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。

2、使用animation制作动画的步骤：

（1）通过关键帧（@keyframes）来声明一个动画。

（2）找到要设置动画的元素，并且调用关键帧声明的动画。其中IDNET就是一个动画名称，percentage就是一个百分比，用来定义某个时间段的动画效果。

@keyframes ident{
    from{
        /*CSS样式写在这里*/
    }
    percentage{
        /*CSS样式写在这里*/
    }
    to{
        /*CSS样式写在这里*/
    }
}

@keyframes spread {
   0% {width:0;}
   33% {width:23px;}
   66% {width:46px;}
   100% {width:69px;}
 }

（3）调用关键帧：

animation：animation-name animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-play-state
animation-fill-mode;