下面列子中的2个图片的效果。

http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html

第一个为transition属性变化效果

第二个为animation动画效果

是不是已经看出他们之间的相同与不同了吧。对的，他们都可以实现简单的动画效果，但transition变化效果当鼠标离开动画结束时，它还是会持续一段时间的动画并最终返回为元素的初始样式。animation动画效果则不是，当鼠标离开后它会之间立刻结束动画效果。

还有一点区别：transition属性变化时间点不易控制，只能见到的通过鼠标经过或者js动态追加类名去对css属性进行transition变化。animation动画则可以控制变化时间的持续长度，延迟变化等。

css3 transition属性变化与animation动画的相似性以及不同点