CSS3实现动画效果
如何让在只有HTML与CSS的情况下实现动态效果呢？
关于动画，众所周知，JavaScript与Flash是做动画的主流，虽然CSS3的过渡并没有前两个专业，但是正是由于CSS3处理数据较少，其过渡比德芙还要丝滑。
今天让我们来看一下：
一、过渡（transtion）
属性：
1、transition-property
2、transition-duration（默认值为0，此时变化为一瞬间，没有过渡效果）
3、transition-timing-function
4、transition-delay
功能：
1、指定要过渡的CSS属性
2、指定完成过渡需要花费的时间（s）
3、指定过渡函数
其包括liner：匀速
ease-in：减速
ease-out：先加速再减速
4、指定过渡开始进行的延迟时间（s）
代码如下：
过渡
注意：由于过渡需要用户操作才可以实现，所以用:hover，若希望多个元素都具有过渡属性，则用ALL即可。和我们一起所写的background一样，既可以分开来写，也可以写在一起。
二、转换
1、移动
通过使用rotate（）实现 单位deg
语法格式： transform：rotate(45deg) 旋转45度
转换之旋转
2、旋转
通过使：用transform实现，可实现元素的位移与旋转、缩放
位移：transform：translate（）
旋转；transform：rotate（）
缩放：transform：scale（）
位移需要通过x与y坐标确定移动位置 语法格式：
transform:translate(x,y); transform:translateX(n); transform:translateY(n)
转换之移动
3、缩放
缩放使用transform:scole（） 语法格式： transform:scole(1,1)宽和高都放大一倍 transform:scole(2)相当于scole(2,2) 大于1为放大，小于为缩小。
代码如下：
转换之缩放
三、动画
transition虽然纵享丝滑，但是缺点非常明显：
1、需要用户通过特定的操作进行触发
2、transition是一次性的，并不能重复，除非继续特定出发
3、其只能定义开头与结尾，中间过程无法定义
在这种万般无奈的情况下，animation诞生了！它不仅可以通过每一帧来进行动画效果的展示，并且可以完美调用每一帧。动画是css中的一功能，与过渡最大的区别是：动画可以实现更多变化，更多控制，自动播放等功能 若使用动画，浏览器应该是最高版本 使用动画时，用@keyframes来作为关键帧，通过百分比构建样式规则。
代码如下：
动画1
属性：
1、animation-name（none为默认值，无动画效果）
2、animation-duration（默认值为0，无动画效果）
3、animation-timing-function（同上）
4、animation-delay
5、animation-iteration-count（1为默认值，infinite为无限次循环）
6、animation-direction（默认值为normal）
7、animation-state（默认running播放，pause暂停）
8、animation-fill-mode（默认值none，forwards回到关键帧，backwards回到第一帧）
功能：
1、指定关键帧动画名字
2、指定动画播放时间
3、设置动画播放方式
4、设置开始时间
5、设置循环次数
6、动画播放方向
7、播放状态，播放或者暂停
8、播放时间外属性