CSS3-过渡动画（transition & animation)

目前在CSS3中使用动画效果有两种途径：
transition 和 animation

1.transition
主要属性：
transition-delay 过渡动画延迟时间
transition-duration 过渡动画持续时间
transition-timing-function:linar 过渡变化曲线图

实例：

实现效果图：

2.animation
主要属性：
animation-duration 一次动画从开始到结束持续多长时间
animation-delay 延迟多少时间开始动画
animation-name 动画名
animation-iteration-count 设置动画播放次数，属性值为 infinite 表示无限次重复播放该动画
animation-direction: alternate 设置动画播放方式，属性值为 alternate 表示animation正反向交替运行
etc…

实例：（变大缩小动画 to…from ）

实现效果图：

实例2：（在animation 中设立多个断点）

实现效果图：

动画和过渡效果的区别：
1.动画必须完整整次，如果是执行一次，结束时会回到最初始状态。
2.过渡动画则不用，过渡效果结束时会停在设定的状态上。
3.动画效果使用比较复杂，需要用到一个名为animation-name的属性