一、transition动画
语法：transition:过渡属性 过渡时间 过渡延迟时间 过渡方式;
1.transition-property(过渡属性)
取值：
none 默认值，没有属性发生过渡
all 所有发生变化的css属性都添加过渡
eg: transition:all 1s;
indent 指定要添加过渡的css属性列表
eg: transition:transform 3s,background 2s,border-radius 1s;
2.transition-duration(过渡所需时间)
取值：
0 默认值，不过渡，直接看到结果
time 按照给定的时间执行过渡，单位为s
3.transition-delay(过渡延迟执行时间)
取值：
0 默认值，不延迟
正值 按照设置的时间延迟执行动画
负值 设置时间前的动画将会被截断
4.transition-timing-function(过渡方式)
取值：
ease 缓解效果（默认效果）
linear 线性效果（匀速运动）
ease-in 渐显效果（加速运动）
ease-out 渐隐效果（减速运动）
ease-in-out 渐显渐隐效果（慢-快-慢）
二、animation动画
语法：animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放状态 动画运动方向 动画时间之外的状态 动画执行方式;
■ 说明：在设置animation属性之前，首先要定义好动画关键帧，语法如下：
@keyframe 动画名称{
0%(from){
color:red; …
}
20%{ … }
100%(to){
…
} }
注：兼容不同浏览器内核的写法：@-webkit-keyframes动画名称{…}
1.animation-name(动画名称)
eg: animation:box_ani 1s;
注：此处的动画名称要和自定义关键帧中的动画名称保持一致
2.animation-duration(动画执行一次所需时间)
取值：
0 默认值，不执行动画
time 按照设置时间执行动画
3.animation-delay(动画在第一次播放前延迟执行的时间)
取值：
0 不延迟
正值 按照设置的时间延迟执行动画
负值 设置时间前的动画将会被截断
4.animation-iteration-count（动画播放次数）
取值：
number 正整数
infinite 无限循环播放
5.animation-play-state（动画播放状态）
取值：
running 默认值，运动
paused 暂停
eg: .box{animation:box_ani 5s linear infinite;}
.box:hover{animation:box_ani 5s linear infinite paused;}
6.animation-timing-function(动画执行方式)
取值：
ease,linear,ease-in,ease-out,ease-in-out
step-start 马上转跳到动画结束状态(或下一帧关键帧)
step-end 保持动画开始时的状态，动画结束时，马上转跳到动画结束状态
steps(n,start|end) n为动画分几步完成
7.animation-direction（动画运动方向）
取值：
normal 正常方向运动
reverse 反向运动
alternate 正反方向交替运动
alternate-reverse 奇数次反方向，偶数次正方向
8.animation-fill-mode（设置动画时间之外的状态）
取值：
none 默认值，不设置时间之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 遵循forwards和backwords两个规则
★ transition和animation的区别
a) transition动画需要触发条件，animation动画不需要触发条件，页面加载完成后自动执行
b) transition动画触发一次，执行一次，再次执行，需要再次触发。animation动画可以指定播放次数，甚至可以无限循环播放
c) transition动画只有开始和结束两个状态，不能设置中间状态。animation动画可以像flash一样设置中间的关键帧h
扩展：倒影或镜像
语法：-webkit-box-reflect:left|right|above(上)|below(下) 偏移量 渐变;
