1、相关属性
transition-property 过渡动画的相关属性，当属性发生变化时Transition可以让它平滑的从初始值过渡到目标值。这就要求属性是可计算的（可以用数值表达的），是可以渐变的，例如：width、height、color。一些无法渐变的属性是无法参与到过渡动画中，例如：font-family、display、position等等。
transition-duration过渡动画持续的时间，一般用单位选择s（秒）或者ms（毫秒）。例如1s、500ms等等。
transition-timing-function过渡动画的时间曲线，该函数用来设置过渡动画渐变的平滑曲线，它除了几个给定的值(ease、ease-in、ease-out、ease-in-out等等)，还可以用cubic-bezier进行自定义，可参考https://cubic-bezier.com/。
transition-delay动画延迟设置。可以通过该属性推迟动画的执行。单位与transition-duration一样，都是s（秒）或者ms（毫秒）。
2、优点与缺点
transition动画的优点：
简单。使用transition创建动画是一件非常简单的事情，只需要设置好transition的四个属性值，然后让对应的渐变属性发生改变。
性能好。transition动画不需要通过js来控制渐变过程，它的所有的动画都是浏览器内部实现的，并且当动画性能不能满足要求时，我们还可以通过启动GPU或者设置will-change属性来提升性能。
缺点：
需要属性发生变化。在没有属性发生变化的情况下，Transition属性是不生效的，因此只有在用户交互或者通过js模拟交互才能触发Transition动画。
只能执行一次，不能设置循环次数。Transition动画执行完成之后就结束了，不能像animation动画那样设置循环的次数。如果需要再来一次，那么只能再触发一次。
3、常见应用场景
1、元素hover时发生阴影，形状，位置上的变化。
2、元素移动时，让元素平滑的过渡到目的位置。
3、元素的简单入场、出场动画。
网友评论