CSS 中多个属性的过渡简写?

cssweb developmentfront end technology更新于 2024/4/25 7:40:17

我们可以使用 CSS 为 HTML 元素添加过渡效果。在开始本教程之前，让我们先了解一下什么是过渡。简单来说，过渡就是元素从一个状态到另一个状态的转变。例如，当用户将鼠标悬停在元素上时，我们会改变元素的尺寸。

在 CSS 中，我们可以使用两种方式为元素添加过渡效果。第一种是同时使用"transition-property"、"transition-duration"、"transition-timing-function"和"transition-delay"这四个属性。第二种是只使用 CSS 属性"transition"。

CSS 的"transition"属性是以下 CSS 属性的简写。

Transition-property - 它指定了我们需要应用过渡效果的 CSS 属性。如果我们需要在所有属性上应用过渡效果，可以使用"all"作为值。
Transition-duration − 过渡效果的总时长，以秒为单位。
Transition-timing-function − 决定过渡的进行方式。过渡计时函数的示例包括"liner"、"ease-in"、"ease-out"、"ease-in-out"等。
Transition-delay − 过渡效果开始后应持续的时间。

语法

用户可以按照以下语法将过渡简写与多个 CSS 属性结合使用。

element {
   transition: Property duration timing-function delay;
}

在上述语法中，第一个值是过渡属性，第二个值是过渡持续时间，第三个值是计时函数，最后一个值是过渡延迟。

示例 1

在下面的示例中，我们有一个尺寸为 200 x 200 的 div 元素，并在 div 元素的高度上添加了过渡效果，持续时间为 2 秒。此处，过渡延迟为 0.5 秒，计时函数为"ease-in-out"。

用户可以将鼠标悬停在 div 元素上观察过渡效果。我们可以观察到 div 元素的高度是平滑增加的，而不是立即增加的。

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 500px;
         height: 200px;
         background-color: red;
         color: white;
         font-size: 25px;
         transition: height 2s ease-in-out 0.5s;
      }
      .element:hover {
         height: 400px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
   <div class = "element">
      This div contains the texts.
      <p> Hover over this div and wait to see the changes </p>

   </div>
</body>
</html>

示例 2

在下面的示例中，div 元素的初始左边距为 2px。当用户将鼠标悬停在 div 元素上时，我们将左边距增加到 100px。我们在 div 元素的 CSS 属性 margin-left 上添加了过渡效果，该效果在延迟 0.5 秒后持续 2 秒。

在输出中，将鼠标悬停在 div 元素上，它将在 2 秒内向右移动 100px。

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s ease-in-out 0.5s;
      }
      .element:hover {
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the below div and wait to see the changes. </p>
   <div class = "element">
      This div contains the texts.
   </div>
</body>
</html>

示例 3

在下面的示例中，我们为多个 CSS 属性添加了过渡效果。这里，我们为"margin-left"、"height"、"width"、"background-color"、"color"和"font-size"这几个 CSS 属性添加了 2 秒的过渡效果。

在输出中，用户可以观察到所有 CSS 属性都实现了平滑过渡。但是，我们可以使用"all"作为"transition-property"的值，为所有属性添加过渡效果。

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
      }
      .element:hover {
         margin-left: 100px;
         height: 400px;
         width: 400px;
         background-color: aqua;
         color: black;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the bellow div to see the achennges</p>
   <div class = "element">
      Square div element.
   </div>
</body>
</html>

用户学习了如何使用 CSS 属性"transition"，它是与过渡相关的多个 CSS 属性的简写。在这里，我们已经在以上三个示例中学习了如何使用 CSS 属性"transition"。在最后一个示例中，我们为多个 CSS 属性添加了过渡效果。