How to Use Icons to Make an Animated Effect Using CSS?

Last Updated : 07 Aug, 2024

Icons are small, visual representations of actions or content. They can add a lot of style and functionality to a website, especially when combined with animations. we'll explore how to use CSS to animate icons, giving your website a lively and interactive touch.

These are the following approaches for using icons to make an Animated Effect using CSS:

Table of Content

Using Pulse Animation

This approach makes an icon appear to "pulse" by smoothly enlarging and then shrinking it. It uses the @keyframes rule to define how the icons scale up and down over time. The icon grows bigger and then returns to its original size in a repeating cycle, creating a pulse effect.

Example: Let's create step wise a simple animated heart icon. We’ll use the Font Awesome library for the heart icon and CSS to animate it.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport"            content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">  </head>  <body>     <style>         .icon-container {             text-align: center;             margin-top: 50px;         }          .fa-heart {             font-size: 48px;             color: red;             animation: pulse 1.5s infinite;         }          @keyframes pulse {             0% {                 transform: scale(1);             }              50% {                 transform: scale(1.2);             }              100% {                 transform: scale(1);             }         }     </style>      <div class="icon-container">         <i class="fas fa-heart"></i>     </div> </body>  </html>

Output:

Using Bounce Animation

This approach creates a "bouncing" effect by making the icon move up and down. It uses keyframes to define how far the icon moves at different points in the animation. The icon jumps up and then comes back down, with smaller bounces as it returns to its starting position, simulating a bouncing motion.

Example: Create a bouncing ball effect for a simple circle icon. This effect makes the icon appear as if it's bouncing up and down.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=           "width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">     <style>         /* CSS will go here */         style.bounce-container {             text-align: center;             margin-top: 50px;         }          .fa-circle {             font-size: 48px;             color: blue;             animation: bounce 2s infinite;         }          @keyframes bounce {              0%,             20%,             50%,             80%,             100% {                 transform: translateY(0);             }              40% {                 transform: translateY(-30px);             }              60% {                 transform: translateY(-15px);             }         }     </style> </head>  <body>     <div class="bounce-container">         <i class="fas fa-circle"></i>     </div> </body>  </html>

Output:

Using Rotate Animation

This approach makes an icon continuously spin around in a circle. It uses keyframes to rotate the icon from 0 to 360 degrees.The icon rotates fully around its centre in a smooth, endless loop, creating a spinning effect.

Example: Create a rotating gear icon to simulate a loading effect.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=           "width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">     <style>         /* CSS will go here */          style.rotate-container {             text-align: center;             margin-top: 50px;         }          .fa-cog {             font-size: 48px;             color: gray;             animation: rotate 2s linear infinite;         }          @keyframes rotate {             from {                 transform: rotate(0deg);             }              to {                 transform: rotate(360deg);             }         }     </style>  </head>  <body>     <div class="rotate-container">         <i class="fas fa-cog"></i>     </div> </body>  </html>

Output:

Recording-2024-08-05-115256 — Animated Rotating Gear

Conclusion

Using CSS animations with icons can greatly enhance the visual appeal of our website. By this we can easily add animated effects to our icons, making them more engaging and interactive. Experiment with different animations and styles to find what works best for our design.