How to useCSS Animations in Javascript

Approach 1: Using setInterval() Method

In this approach, we will use CSS animations for blinking the background color. CSS Animations is a technique to change the appearance and behavior of various elements in web pages.

Syntax:

/*property-name*/: /*value*/;

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Blinking Background Color 
    </title> 
  
    <style> 
      
        /* Define a CSS animation named "blink" */ 
        @keyframes blink { 
  
            0%, 
            100% { 
                background-color: #ff0000; 
                /* First color - red */ 
            } 
  
            50% { 
                background-color: black; 
                /* Second color - black */ 
            } 
        } 
  
        /* Apply the "blink" animation to  
        elements with class "blinking-effect" */ 
        .blinking-effect { 
            animation: blink 1s linear infinite; 
            /* The animation will run indefinitely */ 
        } 
    </style> 
</head> 
  
<body> 
    <!-- The div that will have the blinking background -->
    <div id="blinkDiv" class="blinking-effect" 
        style="width: 400px;  
               height: 100px;  
               padding: 20px;  
               text-align: center;  
               font-size: 24px;"> 
        <!-- Content inside the div -->
        <h1 style="color:green"> 
            w3wiki 
        </h1> 
    </div> 
</body> 
  
</html>

Output:

How to Add Blinking Background Color in JavaScript ?

In this article, we will learn how to create a blinking background color. Adding a blinking background color to an element can be an attention-grabbing visual effect that can be useful in various web applications. It can be achieved using JavaScript by toggling the background color of an element between two or more colors at regular intervals.

Below are the approaches through which we can do this: