Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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
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 1: Reducing Icon Size with Scale Transform
In the example below, we have taken a download icon and set the 200px 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
<!DOCTYPE html>
<html>
<head>
<style>
.icon-container {
text-align: center;
padding: 20px;
}
.animated-icon {
height: 200px;
width: 200px;
animation: shrink 5s infinite;
}
@keyframes shrink {
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 animation using CSS</h3>
<div class="icon-container">
<svg class="animated-icon" viewBox="0 0 100 100">
<rect x="30" y="20" width="40" height="5" fill="#333" rx="2"/>
<polygon points="35,30 50,45 65,30" fill="#333"/>
<rect x="35" y="35" width="30" height="40" fill="none" stroke="#333" stroke-width="3" rx="3"/>
<text x="50" y="85" text-anchor="middle" font-size="8" fill="#333">Download</text>
</svg>
</div>
</body>
</html>
A download icon gradually shrinks from full size to 20% of its original size over 5 seconds, creating a smooth scaling animation that repeats infinitely.
Example 2: Reducing Icon Size with Width and Height
In the example below, we reduce the icon image's height and width to reduce the icon's size rather than using the transform: scale() CSS property
<!DOCTYPE html>
<html>
<head>
<style>
.icon-container {
text-align: center;
padding: 20px;
}
.size-animated-icon {
animation: resize 5s infinite;
}
@keyframes resize {
0% { height: 200px; width: 200px;}
20% {height: 160px; width: 160px;}
40% {height: 120px; width: 120px;}
60% {height: 80px; width: 80px;}
80% {height: 60px; width: 60px;}
100% {height: 40px; width: 40px;}
}
</style>
</head>
<body>
<h3>Reducing icon size using width and height properties</h3>
<div class="icon-container">
<svg class="size-animated-icon" viewBox="0 0 100 100">
<circle cx="50" cy="30" r="15" fill="#FF6B6B"/>
<rect x="20" y="45" width="60" height="30" fill="#4ECDC4" rx="5"/>
<rect x="30" y="55" width="10" height="15" fill="#45B7D1"/>
<rect x="60" y="55" width="10" height="15" fill="#45B7D1"/>
<text x="50" y="85" text-anchor="middle" font-size="8" fill="#333">Baby Room</text>
</svg>
</div>
</body>
</html>
A baby room icon shrinks from 200px to 40px dimensions by directly animating the width and height properties, creating a similar shrinking effect as the transform method.
Example 3: Increasing Icon Size During Animation
In the example below, we increase the size of the icon during the animation rather than decreasing it. We scale the image by 50% in the middle of the animation
<!DOCTYPE html>
<html>
<head>
<style>
.icon-container {
text-align: center;
padding: 50px;
}
.grow-icon {
height: 100px;
width: 100px;
animation: grow 4s infinite;
}
@keyframes grow {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
</style>
</head>
<body>
<h3>Increasing the size of the icon during animation using CSS</h3>
<div class="icon-container">
<svg class="grow-icon" viewBox="0 0 100 100">
<rect x="10" y="60" width="15" height="30" fill="#A0A0A0" rx="2"/>
<rect x="30" y="40" width="15" height="50" fill="#808080" rx="2"/>
<rect x="50" y="25" width="15" height="65" fill="#606060" rx="2"/>
<rect x="70" y="50" width="15" height="40" fill="#707070" rx="2"/>
<text x="50" y="95" text-anchor="middle" font-size="8" fill="#333">Buildings</text>
</svg>
</div>
</body>
</html>
A city buildings icon smoothly grows from its original size to 1.5x larger at the midpoint of the animation, then returns to normal size over 4 seconds, repeating infinitely.
Conclusion
Users learned to animate icons in this tutorial. We can change the dimensions of icons using the transform: scale() CSS property for smooth scaling or using the height and width properties together for direct size manipulation.
593 Views
