在CSS中使用多个属性的过渡简写方式？

我们可以使用CSS将过渡效果添加到HTML元素中。在开始本教程之前，让我们先了解一下过渡效果是什么。基本上，过渡是指元素从一种状态变为另一种状态。例如，当用户悬停在元素上时，我们改变元素的尺寸。

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

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: 属性 时长 时间函数 延迟;
}

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

示例1

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

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

<html>
<head>
   <style>
      /* 在元素上添加过渡效果 */
      .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>使用CSS的过渡属性将过渡添加到元素中</h3>
   <div class = "element">
      此div包含文本。
      <p> 悬停在此div上并等待更改 </p>  

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

示例2

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

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

<html>
<head>
   <style>
      /* 在元素上添加过渡效果 */
      .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>使用CSS的过渡属性将过渡添加到元素中</h3>
   <p>悬停在下面的div上并等待更改。</p>
   <div class = "element">
      此div包含文本。
   </div>
</body>
</html>

示例3

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

在输出中，用户可以观察到它平稳地过渡到所有 CSS 属性。但是，我们可以将“所有”作为“transition-property”的值，以添加到所有属性过渡效果。

<html>
<head>
   <style>
      /* 在元素上添加过渡效果 */
      .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> 使用 CSS 的 <i> 过渡属性 </i> 向元素添加过渡 </h3>
   <p>将鼠标悬停在下面的 div 上以观察更改</p>
   <div class = "element">
      正方形 div 元素。
   </div>
</body>
</html>