Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create Incoming Call Animation Effect using CSS?

CSS Web Development Front End Technology

The CSS animation property allows developers to create dynamic visual effects that enhance user experience. One popular effect is the incoming call animation, which simulates a ringing phone with pulsing shadows and vibration motion.

In this article, we will create an incoming call animation effect using CSS animations and the box-shadow property to simulate the visual feedback of a ringing phone.

Syntax

.element {
    animation: name duration timing-function iteration-count;
    box-shadow: offset-x offset-y blur-radius spread-radius color;
}

@keyframes name {
    0% { /* initial state */ }
    50% { /* middle state */ }
    100% { /* final state */ }
}

Key Properties Used

Property Purpose
animation Creates smooth transitions between different states
box-shadow Generates expanding ring effects around the element
transform: rotate() Creates vibration by rotating the element
@keyframes Defines the sequence of animation states

Example: Basic Box Shadow Effect

Let's first understand how box-shadow works with a simple example 

<!DOCTYPE html>
<html>
<head>
<style>
    .shadow-demo {
        width: 200px;
        height: 100px;
        background-color: #4CAF50;
        margin: 50px;
        padding: 20px;
        box-shadow: -5px -10px 0px 5px yellow;
        border: 2px solid black;
    }
</style>
</head>
<body>
    <div class="shadow-demo">
        <p>Box with yellow shadow</p>
    </div>
</body>
</html>

A green box with a yellow shadow appears, offset 5px left and 10px up from the element.

Example: Incoming Call Animation

Now let's create the complete incoming call animation with pulsing rings and vibration effect 

<!DOCTYPE html>
<html>
<head>
<title>Incoming Call Animation</title>
<style>
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1e3c72, #2a5298);
        font-family: Arial, sans-serif;
    }
    
    .phone-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        height: 300px;
        width: 250px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    .call-button {
        position: relative;
        background: #00C851;
        color: white;
        font-size: 30px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        animation: pulse-rings 2s infinite ease-out, vibrate 0.5s infinite ease-in-out;
    }
    
    .call-button::before {
        content: "?";
        font-size: 35px;
    }
    
    @keyframes pulse-rings {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 200, 81, 0.7);
        }
        25% {
            box-shadow: 0 0 0 20px rgba(0, 200, 81, 0.4),
                        0 0 0 40px rgba(0, 200, 81, 0.2);
        }
        50% {
            box-shadow: 0 0 0 40px rgba(0, 200, 81, 0.2),
                        0 0 0 60px rgba(0, 200, 81, 0.1),
                        0 0 0 80px rgba(0, 200, 81, 0.05);
        }
        100% {
            box-shadow: 0 0 0 80px rgba(0, 200, 81, 0);
        }
    }
    
    @keyframes vibrate {
        0% { transform: rotate(0deg); }
        25% { transform: rotate(2deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-2deg); }
        100% { transform: rotate(0deg); }
    }
    
    .caller-info {
        position: absolute;
        top: 50px;
        text-align: center;
        color: white;
    }
    
    .caller-name {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .caller-number {
        font-size: 16px;
        opacity: 0.8;
    }
</style>
</head>
<body>
    <div class="phone-container">
        <div class="caller-info">
            <div class="caller-name">John Doe</div>
            <div class="caller-number">+1 234 567 8900</div>
        </div>
        <div class="call-button"></div>
    </div>
</body>
</html>

A phone interface appears with caller information at the top and a green call button that pulses with expanding rings while gently vibrating, creating a realistic incoming call animation effect.

Key Animation Techniques

  • Pulse Rings: Multiple box-shadows with decreasing opacity create expanding ring effects
  • Vibration: Small rotation transforms simulate phone vibration
  • Timing: Different animation durations create realistic motion patterns
  • Transparency: RGBA colors with decreasing alpha values create fading effects

Conclusion

CSS animations combined with box-shadow properties create compelling incoming call effects. The key is layering multiple animations with different timing and using transparency for realistic visual feedback that enhances user engagement.

Updated on: 2026-03-15T16:05:27+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements