CSS3 中过渡和动画的区别和各自适用场景？

1.动画循环就用animation。在animation中有一个animation-iteration-count属性可以定义循环次数。

transition是执行一次以后就不会执行，但是可以通过transitionEnd事件添加循环，与animation相比animation更加简单明了。

2.自动触发用animation。

当页面中的动画是自己执行的那么我们考虑用animation，因为transition是需要借助伪类、js、@madia触发的。常见的伪类是：hover ，：focus。

常见的js就比如click事件。@media可以用于页面缩小到1000px你可以展示你需要的动画。

3.复杂的动画用animation。在遇到很复杂的动画那就用animation。

因为animation可以定义关键帧。那你就可以控制每一帧的动画效果。

简单的动画效果可以用transition，里面有transition-timing-function属性可以展示动画的速度效果。