CSS 属性 transition 用于指定元素从一种样式平滑过渡到另一种样式的效果。通过设置 transition 属性,我们可以控制元素在改变样式时的过渡效果,比如渐变、缩放、旋转等。
语法
----------- -------- -------- --------------- ------
property
:指定要过渡的 CSS 属性,可以是all
(所有属性)、margin
、color
等。duration
:指定过渡的持续时间,单位为秒(s)或毫秒(ms)。timing-function
:指定过渡的时间函数,比如ease
、linear
、ease-in-out
等。delay
:指定过渡开始前的延迟时间,单位为秒(s)或毫秒(ms)。
示例
---- - ------ ------ ------- ------ ----------------- ---- ----------- ----- -- ----------- ----- - ---------- - ------ ------ -
在上面的示例中,当鼠标悬停在 .box
元素上时,宽度会在 1 秒内从 100px 平滑过渡到 200px,过渡效果为 ease-in-out,延迟时间为 0.5 秒。
注意事项
- 使用 transition 属性时,需要注意不要过度使用动画效果,以免影响用户体验。
- 可以通过在不同状态下设置不同的 transition 属性来实现更加复杂的过渡效果。
- 在移动端开发中,要注意过渡效果可能会影响性能,需要谨慎使用。