Open In App

Reduce the size of an icon during the animation

Improve
Improve
Like Article
Like
Save
Share
Report

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




<!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>


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




#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;
    }
    }


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.
 



Last Updated : 08 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads