一、变形效果
1、CSS3中实现变形的优点：
(1)不需要加载额外的文件(flash文件)
(2)提供开发效率
(3)提高页面的执行速度
2、用法：
transform:none | transform-function
none：不变形
transform-function：指定变形函数
3、变形函数：
(1)matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于
直接应用一个[a,b,c,d,e,f]变换矩阵
(2)translate(<length>[, <length>])： 指定对象的2D translation(2D平移)。
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
(3)translateX(<length>)： 指定对象X轴（水平方向）的平移
(4)translateY(<length>)： 指定对象Y轴（垂直方向）的平移
(5)scale(<number>、[<number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，
第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
若是负数,先反转对象,然后缩放
(6)skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数表示相对于X轴
进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。
单位是deg,表示角度
(7)rotate(angle):旋转,参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，
否则，按照逆时针旋转。
(8)rotateX()函数用于指定元素围绕X轴旋转.参数如果值为正，元素将围绕X轴顺时针旋转；
反之，如果值为负，元素围绕X轴逆时针旋转。
(9)rotateY();数用于指定元素围绕Y轴旋转.参数如果值为正，元素将围绕Y轴顺时针旋转；
反之，如果值为负，元素围绕Y轴逆时针旋转。
4、中心点：变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。
transform-origin: x-axis y-axis z-axis;
二、过渡效果(transition)
1、transition-property属性：
none：没有过渡效果
all：所有属性都可以获得过渡效果
property：指定采用过渡效果的属性名,若是多个属性用逗号隔开
2、transition-duration属性：指定对象过渡的持续时间,单位是秒(s)或毫秒(ms)
transition-duration: time
3、transition-timing-function属性：设置过渡效果的速度曲线
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 默认值,平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
变形和过渡的区别：
1、变形能够设置对象的中心点;过渡默认是对象的左上角,不能改变
2、过渡效果是针对元素的属性进行的改变;变形是针对整个元素进行的改变
3、过渡效果可以设定过渡的时间、曲线、延迟等;变形不能设置,变形是瞬间完成的变化
4、过渡、变形都不会对其他元素的布局产生影响
5、两者一般都会设置触发的条件
三、动画效果
1、创建动画：
@keyframes 动画名称{
keyframes-selecter :{ css-styles}
}
(1)动画名称：是CSS动画的唯一标识,不能为空。引用动画时通过该名称引用
(2)keyframes-selecter：关键帧选择器,表示当前关键帧在整个动画中的位置;取值可以是百分比、from 、to
from和0%含义是相同的； to和100%的函数时相同的
(3)css-styles：在当前关键帧时的动画状态。多个属性用分号分隔，不能为空
2、动画的属性：
animation-name：动画名称,不能省略。用于引用动画
animation-duration：<time> 指定动画的持续时间,单位可以是秒(s)或毫秒(ms)
animation-timing-function：设置动画的过渡类型,取值如下：
linear： 线性过渡
ease： 平滑过渡
ease-in： 由慢到快
ease-out： 由快到慢
ease-in-out： 由慢到快再到慢
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环运行次数,默认是0
animation-direction: 动画运行的方向,取值如下：
normal： 正常方向
alternate： 正常与反向交替
animation-play-state ： 设置动画的状态
running： 运动
paused： 暂停
animation-fill-mode 设置动画之外的状态
none： 默认值。不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始的状态