CSS transition(过渡效果）——详解
- CSS transition
CSS transition
CSS transitions 是一种CSS特性，它允许你在不同的CSS属性值之间创建平滑的动画过渡效果，当你希望CSS属性在一段时间内从一个值过渡到另一个值时，就可以使用过渡效果，而不是瞬间变化。
要创建一个过渡效果，你需要指定两个主要的信息：
- Transition Property（过渡属性）：你希望应用过渡效果的CSS属性。
- Transition Duration（过渡持续时间）：过渡效果的时间长度，定义了过渡效果从开始到完成需要多长时间。
此外，还有两个可选的信息：
- Transition Timing Function（过渡计时函数）：定义了过渡效果的速度曲线，这个速度曲线会在整个过渡过程中有所变化，例如线性、缓入、缓出或缓入缓出。
- Transition Delay（过渡延迟）：定义了过渡效果在开始之前需要等待的时间。
下面是一个CSS transition的基本语法：
selector {transition-property: property;transition-duration: time;transition-timing-function: curve;transition-delay: time;
}
你可以使用简写的transition属性一次性指定所有这些值：
selector {transition: property time curve delay;
}
这里有一个使用CSS transition的例子：
div {background: blue;transition: background 2s ease-in-out 1s;
}div:hover {background: green;
}
在这个例子中，当鼠标悬停在<div>元素上时，背景颜色将在1秒延迟之后开始在2秒内从蓝色过渡到绿色，使用的是ease-in-out计时函数，也就是说过渡开始时慢，结束时也慢。
注意：
- 并不是所有的CSS属性都可以应用过渡效果，一些像
display和z-index这样的属性不支持过渡。 - 在移动端的浏览器渲染性能有限，因此应谨慎使用过渡效果。
- 使用GPU加速的属性（如
transform和opacity）进行过渡可以得到更好的性能，因为这些过渡不会引起回流（reflow）或重绘（repaint）。
CSS transitions提供了一种简易的方法来给网页添加交互动画，增加用户体验的丰富性和互动性，但为了保证性能和不过度分散用户的注意力，应当合理使用过渡效果。
 — RPA)
