Question

CSS animation 与 CSS transition 有何区别

Answer 1

animation（动画）是可以循环运行的，transition（过渡）只能单次运行；
前者可以主动运行（意思就是网页一打开动画就可以自己自动运行），后者则是被动运行（比如需要鼠标移到元素上才会产生过渡效果）；
前者可以利用任何css属性来产生动画，而后者则只能利用可量化的css属性（比如width、height等）来产生过渡效果；
暂时就想到这么多了，有没有其他欢迎大家补充。
其实从名字你就能看到区别了啊，“过渡”就是在两种状态之间产生一系列中间状态，比方说一个元素由小变大，如果是瞬间变化，会给人一种生硬的感觉，而如果在这个过程中添加一个由小逐渐变大的短暂效果，就会变得柔和许多。而“动画”，这个就不用多说了吧，大家都是童年过来的，动画片啊，这怎么能是区区“过渡”所能比拟的呢？