CSS 在动画过程中减小图标的大小

将动画添加到图标或图片中可以提高应用的用户体验。在本教程中，我们将学习如何为图标添加动画效果。同时，我们还将学习在动画过程中如何减小或增大图标的大小。

我们将使用transform: scale属性来在动画过程中改变图标的尺寸。

语法

用户可以按照以下语法在动画过程中减小图标的大小：

img {
   animation: icon 5s infinite;
}
@keyframes icon {
   0% {transform: scale(1);}
   100% {transform: scale(0.6);}
}

在上面的语法中，我们将动画添加到了“img”元素中。此外，我们在动画的关键帧中缩小图像，以减小图标的大小。

示例1

在下面的示例中，我们取了下载图标，并为图标设置了“300px”的宽度和高度。在此之后，我们添加了“icon”动画的关键帧，以在5秒内无限次地动画化图标。

在“icon”关键帧中，当动画完成20%、40%、60%、80%和100%时，我们改变图标的大小。我们使用“transform: scale()”CSS属性在每个断点上减小图标的大小。在输出中，用户可以观察到图标在5秒内进行动画，并且其大小正在缓慢缩小。

<html>
<head>
   <style>
      img {
         height: 300px;
         width: 300px;
         animation: icon 5s infinite;
      }
      /* reducing the size of the icon using the transform CSS property*/
      @keyframes icon {
         0% {transform: scale(1);}
         20% {transform: scale(0.8);}
         40% {transform: scale(0.7);}
         60% {transform: scale(0.6);}
         80% {transform: scale(0.4);}
         100% {transform: scale(0.2);}
      }
   </style>
</head>
<body>
   <h3> Reducing the size of the icon during the animation using the CSS</h3>
   <div class = "icon-div">
      <img src = "https://img.icons8.com/ios/256/download-2--v1.png" alt = "donwload icon">
   </div>
</body>
</html>

示例2

在下面的示例中，我们选择了婴儿房的图标。同时，我们设置了与第一个示例相同的300像素的图标尺寸。

在‘icon’关键帧中，我们减小了图标图片的高度和宽度，以减小图标的尺寸，而不是使用‘transform: scale()’的CSS属性。用户可以观察到输出结果与第一个示例的输出结果相似，使图标缩小了。

<html>
<head>
   <style>
      img {height: 300px; width: 300px; animation: icon 5s infinite;}
      /* reducing the size of the icon using the transform CSS property*/
      @keyframes icon {
         0% { height: 300px; width: 300px;}
         20% {height: 260px; width: 260px;}
         40% {height: 220px; width: 220px;}
         60% {height: 160px; width: 160px;}
         80% {height: 120px; width: 120px;}
         100% {height: 50px; width: 50px;}
      }
   </style>
</head>
<body>
   <h3> Reducing the size of the icon during the animation using the CSS</h3>
   <div class = "icon-div">
      <img src = "https://img.icons8.com/ios/256/babys-room.png" alt = "baby room">
   </div>
</body>
</html>

示例3

在下面的示例中，我们在动画期间增加图标的大小，而不是缩小它。这里，我们采用了城市建筑的图标。

在“icon”关键帧中，我们在动画中间将图像缩放了50%。在输出中，用户可以观察到图标的大小在4秒的动画过程中平稳增大。

<html>
<head>
   <style>
      img {
         height: 100px;
         width: 100px;
         margin: 50px;
         animation: icon 4s infinite;
      }
      /* Increasing the size of the icon using the transform CSS property */
      @keyframes icon {
         0% {transform: scale(1);}
         50% {transform: scale(1.5);}
         100% {transform: scale(1);}
      }
   </style>
</head>
<body>
   <h3>Increasing the size of the icon during the animation using the CSS</h2>
   <div class = "icon-div">
      <img src = "https://img.icons8.com/ios/256/city-buildings.png" alt = "City Buildings">
   </div>
</body>
</html>