css关键帧动画：属性：animation

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（最后的结果保持在第一帧）