以 transition 平滑过渡效果变化

2024-01-26 12:52:51

平滑过渡：使用 CSS Transition 为你的网站注入活力

导航

transition 属性的类型
timing-function 属性
使用 transition
实例
总结
常见问题解答

transition 属性的类型

CSS transition 属性让我们能够轻松地在元素之间创建平滑的过渡效果。我们可以将其应用于各种属性，包括背景色、文本颜色、高度、不透明度和变换。有了 transition，元素可以优雅地从一种状态过渡到另一种状态，为用户提供更愉悦的体验。

timing-function 属性

timing-function 属性决定了过渡的速度和曲线。CSS 为我们提供了五个预定义的值：

linear： 匀速过渡
ease： 缓慢开始，加速，缓慢结束
ease-in： 缓慢开始，加速
ease-out： 加速，缓慢结束
ease-in-out： 缓慢开始，加速，缓慢结束

选择合适的 timing-function 值可以极大地影响过渡效果的外观和感觉。

使用 transition

使用 transition 的语法如下：

transition: <property> <duration> <timing-function>;

例如，为元素的背景色设置 2 秒的过渡时间，并使用 ease-in-out timing-function，我们可以写成：

transition: background-color 2s ease-in-out;

实例

下面的代码示例演示了使用不同 timing-function 值创建的不同过渡效果：

<div id="box">
  <p>Hello World</p>
</div>

<script>
  document.getElementById("box").style.transition = "background-color 2s ease-in-out";
  document.getElementById("box").addEventListener("mouseover", () => {
    document.getElementById("box").style.backgroundColor = "red";
  });
  document.getElementById("box").addEventListener("mouseout", () => {
    document.getElementById("box").style.backgroundColor = "white";
  });
</script>