Reduce the size of an icon during the animation

Icons and Images both are a graphical representation of the things that we want to describe but Icons have a different objective than normal Images. Icons are a general representation of an idea whereas Images are more specific. In CSS, Icons are defined using a different set of properties than normal Images. We don’t use the height and width property to define the size of an Icon as we do for an Image. Hence we need to use different CSS properties to add animations to the Icons. This tutorial will demonstrate how to reduce the size of an Icon during CSS Animations. 

In this article, we will be using font-awesome Icon library to demonstrate changes in its size during an animation. We assume that you are familiar with HTML and CSS and have a basic knowledge of CSS Animations. 
 

Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site and CSS Animation and to load font-awesome using CDN (Content Delivery Network). We will install Browsersync globally. 

npm install -g browser-sync

Step 2: Create an index.html file and an index.css file in your project root folder.

  • index.html: Add the following code in that file.

html



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href=
</head>
<body>
    <div id="icon">
        <i class="fa fa-home fa-sm"></i> Home
    </div>
</body>
</html>

chevron_right


Step 3: We will add CSS Animation to the font-awesome Icon to reduce the size of the Icon. The same approach can also be applied to increase the size of the Icon during a CSS animation. CSS does not have the capability to modify the DOM structure. It can only change the presentation of the HTML DOM. Hence when using font-awesome Icons, we can set the initial size of the Icon using the pre-defined classes provided by the font-awesome library as shown in the code, but we cannot change the size of the Icon during a CSS animation using these classes. To change the size of the Icon, we will have to apply CSS styling to the HTML element as done in the above code. Some examples of pre-defined classes which can be used to set the initial size of the font-awesome Icons are fa-xs, fa-lg, fa-2x, etc.

  • index.css: Add the following Snippet in that file.

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

#icon i {
            font-size: 128px;
            animation: size 4s infinite 1s;
        }
@keyframes size {   
    0% {
        font-size: 128px;
    }
    20% {
        font-size: 100px;
    }
    40% {
        font-size: 80px;
    }
    60% {
        font-size: 60px;
    }
    80% {
        font-size: 40px;
    }
    100% {
        font-size: 20px;
    }
    }

chevron_right


Step 4: To launch the application using Browsersync, run the following command in the project directory or you can run the HTML file directly into your browser. 

browser-sync start --server --files "*"

Output: This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.