如何使用 CSS 在一个元素上创建多个过渡？

王林转载: 2023-08-26 13:37:02 498浏览

使用 CSS 在元素上创建多个过渡是为网站增添趣味和交互性的好方法。通过合并各种过渡，我们可以为用户创建动态且引人入胜的体验。在本文中，我们将介绍如何使用 CSS 在元素上创建多个过渡的基础知识。

层叠样式表 (CSS) 是用于设计网页样式的强大工具。其最有用的功能之一是能够在元素的不同状态之间创建平滑且具有视觉吸引力的过渡，例如当将其悬停或单击时。

什么是 CSS 转换？

在了解如何创建多个过渡之前，我们首先了解什么是 CSS 过渡。过渡是元素的两种状态之间的逐渐变化。例如，当我们将鼠标悬停在按钮上时，其背景颜色逐渐从一种颜色变为另一种颜色。 CSS 允许我们指定这些转换的持续时间和计时，以及正在转换的属性。

语法

css-selector{
   transition: property duration timing-function delay;
}

CSS 中的过渡属性

我们可以在 CSS 中使用的过渡属性包括 -

transition-property - 此属性指定应转换哪些 CSS 属性。
transition-duration - 此属性指定转换的持续时间（以秒或毫秒为单位）。默认情况下，过渡持续时间为 0，这意味着没有应用过渡效果。
transition-timing-function - 此属性控制转换的速度和时间。
transition-delay - 此属性指定转换开始之前的延迟。

创建基本转换

要创建过渡，我们需要指定要设置动画的属性，例如过渡的持续时间、计时函数和任何延迟。例如，要为按钮的宽度创建过渡，为此我们可以使用以下代码 -

button {
   transition: width 0.5s ease-in-out;
}

上面的代码指定按钮的宽度将使用缓入调出计时函数在 0.5 秒的时间内过渡。

创建多个过渡

要在元素上创建多个过渡，我们需要向 CSS 代码添加其他过渡。例如，要创建一个同时转换宽度和背景颜色属性的按钮，为此我们可以使用以下代码 -

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

上面的代码指定按钮的宽度和背景颜色属性将使用缓入调出计时函数在 0.5 秒的时间内进行转换。

以下是一些完整的代码示例，说明如何使用 CSS 在元素上创建多个过渡 -

示例 1

在此示例中，我们将创建一个可转换宽度和背景颜色属性的按钮。但是，我们将为每个过渡使用不同的持续时间来创建交错效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

在上面的示例中，我们为按钮设置了100px的宽度和绿色的background-color。然后，我们设置过渡属性来过渡宽度和背景颜色属性。但是，我们对宽度过渡使用 0.5 秒的持续时间，对背景颜色过渡使用 1 秒的持续时间。这会产生交错效果，其中按钮宽度的过渡速度快于背景颜色。当鼠标悬停在按钮上时，宽度会扩展为150px，并且背景颜色将变为红色。

示例 2

在此示例中，我们将创建一个同时转换背景颜色和边框半径属性的框。但是，我们将为边界半径过渡使用延迟。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

在上面的示例中，我们将框的宽度和高度设置为 200px，背景颜色设置为红色。然后，我们设置过渡属性来过渡背景颜色和边框半径属性。然而，我们对边界半径过渡使用 0.5 秒的延迟。这意味着背景颜色将立即过渡，而边框半径将等待 0.5 秒后再过渡。当鼠标悬停在该框上时，背景颜色将更改为蓝色，边框半径将变为 0，从而创建一个正方形。

示例 3

在这里，我们将创建一个可以转换宽度和颜色属性的按钮。但是，我们将为每个转换使用不同的计时函数来创建独特的效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

在上面的示例中，我们设置按钮的宽度为 120px，背景颜色为蓝色，然后设置过渡属性以过渡宽度和颜色属性。然而，我们为每个转换使用不同的计时函数。宽度过渡使用自定义的三次贝塞尔函数。当鼠标悬停在按钮上时，宽度扩展为 180px，文本颜色将从红色变为白色。