每当我们想要逐渐改变一个元素的样式，从一种样式过渡到另一种样式，无论是通过用户的交互还是通过停留在网站上的时间来实现。您可以使用动画来在任意时间段内改变许多样式。让我们来看一下您需要的动画属性。
关键帧− 这用于指定一个元素的动画。它包含将发生在元素样式上的变化。然后，元素从开始时的样式移动到最后提到的样式。
Animation-name − 这是用于引用动画的，这样您就不必每次添加动画时都要指定规则。
-
动画持续时间 − 这指定了动画应用于元素的持续时间。它的初始值为0ms，可以无限期地进行。
立即学习“前端免费学习笔记（深入）”；
Animation-iteration-count − 这确定了动画将重复播放的次数。
动画延迟 − 如果您需要将动画延迟一段时间，可以使用此属性。
动画方向 − 这指定了动画是需要向前方向、向后方向还是在两个方向上交替进行。
动画时间函数 − 当您希望动画在开始、中间和结束时具有不同的时间间隔时，使用此属性。
我们还可以使用“animation”缩写属性，它由所有这些属性组成。它适用于所有元素，但不可继承。需要注意的是，在使用缩写符号时，值的顺序很重要，因为每个值根据其顺序以不同的方式解释。
例子
在CSS中使用动画的示例如下所示。
Animations in CSS
现在我们知道了CSS中的动画是什么，接下来我们将讨论如何通过动画来使div元素逐渐改变其宽度。
过渡属性
我们将使用transition属性来解决这个问题。这个属性用于为元素添加过渡效果。它是CSS中可用的一种简写属性。
它定义了动画发生时发生的过渡，元素从一个状态变为另一个状态。它适用于所有元素，且不可继承。
以下属性构成了缩写过渡属性。
Transition-delay − 这个属性指定了浏览器在应用过渡属性之前需要等待的时间。它的初始值为0，正值会使其等待更长时间，而负值会使过渡更快。
过渡持续时间 - 这设置了过渡效果可见的时间持续时间，在此持续时间之后，动画结束。此属性的默认值为0，因此默认情况下动画是不可见的。
Transition-property − 它设置将应用过渡效果的元素。它可以有两个可能的值，none和all。默认情况下，值设置为all，因此所有元素都应用了过渡效果，但none表示没有任何元素具有该过渡效果。
Transition-timing-function − 此属性用于控制动画开始、中间和结束时的过渡速度。初始值设置为ease，但CSS有许多预定义的时间函数。
我们可以在悬停状态下设置过渡属性，动画将在悬停或使用活动伪类时触发。我们还可以使用JS动态分配类，并使用它们来触发过渡。
例子
在CSS中使用transition属性的一个简单示例如下所示。
This text will have its font modified on hover
在执行上述程序时，将显示一段文本，如果你将鼠标悬停在上面，你可以看到文本的过渡效果。
使用过渡作为解决方案
我们现在将看到一个使用过渡来解决手头问题的例子。
Example of using transition property to increase width gradually on hover.
Please hover over here
上述程序的输出是一个div 盒子，其宽度在2秒内逐渐从150px变化到500px。
结论
总之，使用CSS的hover选择器逐渐改变分区元素的宽度是一种有效的方式，可以添加细微的动画效果，而无需额外的代码。这在创建网页中的交互元素（如按钮和菜单）时特别有用。只需几行代码，您就可以创建动态效果，使您的页面与众不同。
