CSS中有两个动画：transition 和 animation，为什么需要两个动画属性？

Question

我知道transition和animation怎么使用。但是我不能理解为什么需要两个动画属性。
很明显，animation能力更加强大，那么为什么还会有transition?
有哪些场景是animation实现不了，但是transition能实现的。

Answer 1

比如我想让所有能够动画的CSS属性在更改时都有过渡效果，transition可以指定all关键字，animation你要怎么写？

Answer 2

好像知道了一点，transition是过渡，有属性发生变化时，就会发生过渡动画。但是这个结束属性不是固定的。
animation是完整的动画，需要指定开始和结束。

也就是说，transition动画的开始是固定的，结束不是固定的。 而animation的开始和结束都是固定的。

Answer 3

transition 需要从一个状态过渡到另一个状态。比如说现在坐标 0，你增加了一个 class 或者 hover 了变成了10，他可以给你显示一个补间动画。

但是你现在坐标是0，你需要从 -10 过渡到 10，用 transition 怎么做？你需要禁用动画，然后变成-10，然后setTimeout再变成10。

animation 就没这样的问题。而且可以有任意个关键帧。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

CSS中的transition和animation都是用来实现动画效果的属性，但它们的实现方式不同。

transition是一种过渡效果，它可以在元素从一种样式逐渐变为另一种样式的过程中添加动画效果。例如，当鼠标悬停在一个链接上时，可以使用transition属性来使链接的颜色逐渐变化。

animation则是一种更为复杂的动画效果，它可以在元素的任意时间段内添加动画效果。例如，可以使用animation属性来创建一个无限循环的旋转动画。

因此，transition和animation虽然都可以实现动画效果，但它们的应用场景不同，需要根据具体的需求来选择使用哪种属性。

Answer 5

从名字上来看：
transition 是 过度，是当前状态到下一状态的过度形式，完全可以理解为转场
animation 是 动画，是可连续重复执行的

它们的本质作用还是不一样的

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。