transition动画和关键帧动画的区别在于 transition动画需要有状态的改变触发动画。
image.png
下面的写法和上面的写法一样，同样可以实现一样的功能。
image.png
animation-direction：reverse 动画的进度从百分之百到 0 顺序反过来了。
下面可以设置动画播放次数：
image.png
下面的设置可以设置动画停止：
image.png
下面的设置动画最后一帧的位置是处于动画初始还是动画的最终。
image.png
总结：
image.png
animation关键帧动画补充：
改变一个属性的动画：
image.png
image.png
image.png
改变多个属性的动画：
image.png
结果如下：
image.png
例子 使用animation完成鱼眼效果：
image.png
image.png
效果如下：
image.png
