How to create Incoming Call Animation Effect using CSS ?

Last Updated : 15 Dec, 2021

In this article, we will learn how to create an incoming call animation effect, by using CSS.

Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y offsets relative to the element, blur and spread radius, and color. To create the animation effect, we use the CSS animation property, which lets us configure the timing, duration, and other details of how the animation sequence progress. To control the intermediate steps of the animation sequence, we use @keyframes which lets us specify/alter the CSS style property, in the entire duration of the animation sequence.

Syntax:

box-shadow: offset-x | offset-y | blur-radius | color

HTML Code: In “index.html”, we define our element, on which animation effect is going to work. Link the stylesheet which contains the animation code.

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
    <title>Incoming Call Animation</title> 
    <meta name='viewport' content='width=device-width, initial-scale=1'> 
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'> 
    <link rel="stylesheet" href= 
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity= 
"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous" /> 
</head> 
<body> 
    <div class="call-animation"> 
       <i class="fas fa-phone-volume caller-img"></i> 
    </div> 
</body> 
</html>

CSS Code: In the “main.css” file, we target the element using the class name, call-animation, which has a CSS animation property, and it specifies animation-name, animation-duration, animation-timing-function, and animation-iteration-count. Using @keyframes, we change the CSS box-shadow property, at intervals of the animation sequence. These intervals are specified in percentage, where 0% represents the beginning of the animation and 100% represents the completion of the animation.

main.css

html,body{ 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #71AFFF; 
} 
.call-animation{ 
    background: rgb(130, 221, 233); 
    width: 100px; 
    height: 100px; 
    border-radius: 100%; 
    border: solid 5px rgb(252, 241, 241); 
    animation: call 1.5s ease infinite; 
    color: aliceblue; 
    font-size: 35px; 
    font-weight: bold; 
    position: relative; 
} 
  
.caller-img{ 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    top: 35px; 
    left: 35px; 
} 
  
@keyframes call { 
    15% { 
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); 
    } 
    25% { 
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5), 
                    0 0 0 16px rgba(255, 255, 255, 0.3); 
    } 
    30% { 
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.5), 
                    0 0 0 24px rgba(255, 255, 255, 0.3); 
    } 
} 