Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Reduce the size of an icon during the animation
It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation.
We will use the ‘transform: scale’ property to change the dimensions of the icon during the animation.
Syntax
Users can follow the syntax below to reduce the size of an icon during the animation.
img {
animation: icon 5s infinite;
}
@keyframes icon {
0% {transform: scale(1);}
100% {transform: scale(0.6);}
}
In the above syntax, we have added the animation to the ‘img’ element. Also, we scale down the image in the animation keyframes to reduce the size of the icon.
Example
In the example below, we have taken the download icon and set the ‘300px’ width and height dimensions for the icon. After that, we added the ‘icon’ animation keyframes to animate the icon for 5 seconds and infinite times.
In the ‘icon’ keyframes, we change the size of the icon when the animation completes 20%, 40%, 60%, 80%, and 100%. We reduce the size of the icon using the ‘transform: scale()’ CSS property at every breakpoint. In the output, users can observe that icon is animating for 5 seconds, and its size is reducing slowly.
<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>
Example
In the example below, we have taken the baby room icon. Also, we have set the 300px dimensions for the icon like the first example.
In the ‘icon’ keyframes, we reduce the icon image's height and width to reduce the icon's size rather than using the ‘transform: scale()’ CSS property. In the output, users can observe that it gives similar output as the first example’s output resulting in reducing the icon.
<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>
Example
In the example below, we increase the size of the icon during the animation rather than decreasing it. Here, we have taken the icons of the city buildings.
In the ‘icon’ keyframes, we scale the image by 50% in the middle of the animation. In the output, users can observe that icon size is increasing smoothly during the animation of 4 seconds.
<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>
Conclusion
Users learned to animate the icons in this tutorial. Also, we learned to increase and decrease the size of the icon during the animation. We can change the dimensions of the icon using the ‘transform: scale()’ CSS property or using the ‘height’ and ‘width’ properties together.
246 Views
