1、animation和transition的区别
animation的属性值比transition多两个：动画名称、动画的循环次数、动画在循环中是否反向；中间3个属性值是一样的，，
2、animation复合属性介绍：
?animation关键帧动画不需要触发事件，当你浏览器渲染好开始执行，然后结束返回原始状态，默认只循环一次，
?先介绍最简单的关键帧动画：
?结果：在浏览器打开以后，小的黄色盒子匀速变成绿色盒子，，，
代码解释：在写animation的第一个属性值之前，也就是写动画名称之前，要进行动画声明：格式：@keyframes +空格+动画名称（自己起）{}：里面是from{变换前属性} to{变换后属性}。
重点总结：
（1）animation属性直接写在需要添加关键帧动画的物体身上，不需要触发事件；
（2）关键帧动画需要“动画声明”；动画声明要遵循格式；
（3）简单关键帧动画，声明只用从from到to；
声明格式：
?也可以是百分比的格式：
?设置成from，，to，，只有两种状态；但是设置成百分比就可以中间有很多种变换状态，也就是所谓的设置关键帧，让每一帧慢慢过渡，变成最终的效果。
?循环次数属性值：无限次：infinite
3、animation单一属性介绍
?属性8：animation-fill-mode：属性值；
属性值有三个：none（默认值）、forwards（最后的结果保持在最后一帧）、backwards（最后的结果保持在第一帧）