下面列子中的2个图片的效果。
http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html
第一个为transition属性变化效果
第二个为animation动画效果
是不是已经看出他们之间的相同与不同了吧。对的,他们都可以实现简单的动画效果,但transition变化效果当鼠标离开动画结束时,它还是会持续一段时间的动画并最终返回为元素的初始样式。animation动画效果则不是,当鼠标离开后它会之间立刻结束动画效果。
还有一点区别:transition属性变化时间点不易控制,只能见到的通过鼠标经过或者js动态追加类名去对css属性进行transition变化。animation动画则可以控制变化时间的持续长度,延迟变化等。