什么时候用过渡，什么时候用动画

同学你好，解答如下：

1.先看如下例子对比一下两种方式：

当一个红色盒子，鼠标移入的时候，背景色变成粉色。这个变化过程是看不到的，鼠标移入的时候背景色立马变粉色。所以需要给它加过渡效果：

当然了，这个效果可以使用animation实现，需要定义一个动画：

然后鼠标移入的时候调用动画：

从上面的两种方式看，使用transition更简洁，简单的动画效果推荐使用transition。而animation可以定义动画的一个进度，例如10%的时候要设置什么样式，所以更适合写复杂的动画。

2. 参考如下例子理解它们的区别：

在浏览器中查看，第二个盒子动画自动执行了，而第一个盒子需要鼠标移入的时候，才会有过渡效果。

区别就是animation给元素设置动画，可以在页面打开时直接播放。而transition是在触发一个动作，例如鼠标移入改变样式时，给样式变化设置的过渡效果。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~