过渡和动画的区别

607 阅读1分钟

transition过渡

transition的优点在于简单易用,但是它有几个很大的局限。

  • transition需要事件触发,所以没法在网页加载时自动发生。
  • transition是一次性的,不能重复发生,除非一再触发。
  • transition只能定义开始状态和结束状态,不能定义中间状态。
  • 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

animation动画

通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果,可以解决transition过渡的不足。

区别

  • transition需要触发一个事件才会随着时间改变其CSS属性。
  • animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。 1)动画不需要事件触发,过渡需要。

2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。