如何使用CSS悬停在`div`元素上逐渐改变宽度

每当我们想要逐渐改变元素的样式，无论是通过用户交互还是停留在网页上的时间，我们都可以使用动画来实现。接下来让我们来看看需要用到的动画属性。

Keyframes - 用于指定元素的动画。它包含了元素样式的变化。元素将从起始样式移动到结束样式。
Animation-name - 用于引用动画，以避免每次添加动画时都需要重新指定规则。
Animation-duration - 指定动画应用到元素的持续时间。初始值为0毫秒，可以持续无限期。
Animation-iteration-count - 确定动画将重复的次数。
Animation-delay - 如果您希望动画延迟一段时间再执行，可以使用此属性。
Animation-direction - 指定动画的方向，可以是正向、反向或交替。
Animation-timing-function - 当你希望动画在开始、中间和结束时有不同的时间变化时使用此属性。

我们还可以使用“animation”属性，这是一个包含所有这些属性的简写属性。它适用于所有元素，但不可继承。需要注意的是，使用简写符号时值的顺序很重要，因为每个值根据其顺序的不同解释。

示例

下面是使用CSS动画的示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Animations in CSS</title>
   <style>
      @keyframes example {
         from {
            background-color: maroon;
         }
         to {
            background-color: plum;
         }
      }
      div {
         width: 500px;
         height: 500px;
         margin: 12.25%;
         background-color: maroon;
         animation-name: example;
         animation-iteration-count: infinite;
         animation-duration: 4s;
      }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

现在我们知道CSS中的动画是什么了，我们将讨论如何使div元素进行动画处理，以便使其逐渐改变宽度。

过渡属性

我们将使用过渡属性来解决这个问题。该属性用于向元素添加过渡效果，它是CSS中可用的简写属性之一。

它定义了在动画发生时发生的过渡，元素从一个状态变为另一个状态。它适用于所有元素，不能继承。

以下属性构成了 简写过渡属性 。

过渡延迟（Transition-delay） - 它指定了浏览器在等待之后应用过渡属性的时间。初始值为0，正值使其等待更长时间，负值使过渡更快。
过渡持续时间（Transition-duration） - 它设置过渡效果可见的时间，超过此持续时间，动画结束。该属性的默认值为0，因此默认情况下动画是不可见的。
过渡属性（Transition-property） - 它设置要应用过渡效果的元素。它可以有两个可能的值：none和all。默认情况下，值设置为all，因此所有元素都具有过渡效果，但none表示没有元素具有该过渡效果。
过渡时间函数（Transition-timing-function） - 当您需要控制动画开始、中间和结束时的过渡速度时，可以使用此属性。初始值设置为ease，但是CSS有许多预定义的时间函数。

我们可以在:hover状态下设置过渡属性，当悬停或使用active伪类时触发动画。我们还可以使用JS动态分配类并使用它们触发过渡。

示例

CSS中使用过渡属性的简单示例如下。

<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: none;
         font-size: 14px;
         transition: font-size 4s 1s;
      }
      a:hover {
         font-size: 36px;
      }
   </style>
</head>
<body>
   <a>This text will have its font modified on hover</a>
</body>
</html>

执行上面的程序，将显示一段文本，如果将鼠标悬停在文本上，就可以看到文本的过渡效果。使用过渡作为解决方案，我们现在来看一个示例，解决手头的问题。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: royalblue;
      }
      div {
         width: 150px;
         height: 200px;
         background: linear-gradient(
            0deg,
            rgb(111, 190, 87) 20%,
            rgb(119, 218, 119) 50%,
            rgb(93, 81, 76) 98%
         );
         transition: width 2s;
      }
      .textCenter {
         display: flex;
         align-items: center;
         justify-content: center;
      }
      div:hover {
         width: 500px;
      }
   </style>
</head>
<body>
   <h1>Example of using transition property to increase width gradually on hover.</h1>
   <div class="textCenter">Please hover over here</div>
</body>
</html>

上述程序的输出是一个div盒子，其宽度会在2秒内逐渐从150px变为500px。