1.CSS3制作网页动画
（1）变形简介
①CSS通过transform实现变形，它可以作用在块级42元素和行内元素，作旋转、缩放、移动
②语法:transform:[transform-function]
transform-function：设置变形函数，可以是一个或多个，多个使用空格隔开
（2）常用属性
①translate()：平移函数，基于x，y坐标从新定位元素位置
定义2D转换
translate(x,y):
x：（横坐标）移动的向量长度
y：（纵坐标）移动的向量长度
②Scale()：缩放函数，可以是任意元素对象的尺寸发生变化
③Rotate()：旋转函数，取得是一个度数值
④skew()：旋转函数，取得是一个度数值
（3）2D缩放
①Scale()：函数能够实现缩放元素大小，该函数包含了两个参数，分别用来定义高和宽的缩放比例，，默认值1,0~0.99任意值都可以使元素缩小
过渡和动画
1.Transition（过度）：
[transition-property：过度或过度模拟CSS属性、transition-duration：完成过去索需要的时间、transition-timing-function：定义过得效果的时间曲线]
2.触发事假
伪类触发：
hover：
active：
3.
transition-property：规定过度的CSS属性的名称
语法：transition-property：none|all|property
none:没有属性会的过去
all：所属性都将获得过度属性
property:定义应用过度效果的CSS属性名称列表，列表以逗号隔开
transition-duration：定义过度效果花费的时间,默认0（没有效果）
transition-timing-function：定义过得效果的时间曲线，默认ease
属性:linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)
linear：规定以相同速度开始至结束的过度速度
ease：规定慢速开始，然后变快，然后慢速结束
ease-in：规定以慢速开始
ease-out：规定以慢速结束
ease-in-out：规定以慢速开始，慢速结束
cubic-bezier：自定义，可能是0~1的值。如(0,0.2,0.3,0.4)
Reansition-delay：规定过度效果何时开始
4.动画
1.Anmiation动画：
通过类似flash动画的关键帧来声明一个动画
在Anmiation属性中调用关键帧声明的动画实现更复杂的动画效果
2.设置关键帧的语法
@keyframes IDENT{
From{CSS样式写在这里}
Percentage{CSS样式写在这里}
To{CSS样式写在这里}
}
如：
@keyframes Demo{
0%{width:20px;}
25%{width:10px;}
50%{width:30px;}
100%{width:50px;}
}
3.调用关键帧（animation）
语法：
animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-static animation-fill-mode
简介：
animation-name：由@keyframes创建的动画名称
animation-duration：动画时间
animation-timing-function：动画方式
animation-delay：延迟时间
animation-iteration-count：动画的播放次数
animation-direction：方向
animation-play-static：动画的播放状态
animation-fill-mode:动画开始之前和结束后发生的操作