transition和animation的对比

transition和animation可以实现一些同样的效果。比如相关尺寸和透明度的变化。

transition和animation都可以用逗号分隔，针对1个以上的属性单独进行设定。

1    .div.opacity {
2             transition: width 1s, height 2s, opacity 3s;
3             opacity: 1;
4             width:300px;
5             height: 300px;
6         }

1    .div.animation {
2             animation: animation1 1s, animation2 2s, animation3 3s;
3         }

animation有更多的参数设置，区别于transition的是循环运动下去。

还有其他一些区别：

1，animation在从display:none切换到display:block时有效，但是transition无效

2，animation可以对中间过程进行更具体的设定，transition只能设置开始和结束

过渡的重要性

前端是会向着复杂度高的方向发展的。在我看来过渡是重要且不需要花很多时间就可以学会的。css3动画也可以做的很复杂。

为了实现transition从display:none切换到display:block有效，可以借助宏任务的requestAnimationFrame和setTimeout，实际上这两个方法也是vue过渡动画实现的基础。