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