详细分析transition和animation的区别已经适用场景

首先transition和animation都是用于动画的呈现。

总结二者区别：

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属性可以展示动画的速度效果。

 

参考的网址：https://www.kirupa.com/html5/css3_animations_vs_transitions.htm