CSS 使用多个属性的过渡速记

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

在CSS中，我们可以使用两种方法为元素添加过渡效果。第一种方法是将’transition-property’、’transition-duration’、’transition-timing-function’和’transition-delay’这4个属性一起使用。第二种方法是只使用’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: 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元素的初始margin-left为2px。当用户悬停在div元素上时，我们将margin-left增加到100px。我们在div元素的margin-left CSS属性上添加了2秒的过渡效果，延迟0.5秒后开始。

在输出中，悬停在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>

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