Design a Traffic Light Animation using HTML and CSS

Last Updated : 23 Jul, 2025

In this article, we will explore how HTML and CSS can be utilized to create a Traffic signal animation with Red, Green, and Yellow colors. In this, we have written a code that produces a live traffic signal using HTML and CSS. The code is responsive and uses "Keyframes" for better animation control.

Approach

First, create three divs inside the container div for three signal lights.
Use CSS to define the colors for each light (red, yellow, green).
Align the signals in the center of the webpage.
Utilize CSS keyframe animations to create the blinking effect for lights.

Example: In this example, we will see the basic implementation to create a traffic signal static website by using HTML, and CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Traffic Light Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .traffic-signal {
            width: 100px;
            height: 300px;
            background-color: #333;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .light {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 10px;
            transition: background-color 0.9s;
        }

        @keyframes blinkRed {

            0%,
            49% {
                background-color: red;
            }

            50%,
            100% {
                background-color: black;
            }
        }

        @keyframes blinkYellow {

            0%,
            49% {
                background-color: yellow;
            }

            50%,
            100% {
                background-color: black;
            }
        }

        @keyframes blinkGreen {

            0%,
            49% {
                background-color: green;
            }

            50%,
            100% {
                background-color: black;
            }
        }

        .red {
            background-color: red;
            animation: blinkRed 9s infinite;
        }

        .yellow {
            background-color: yellow;
            animation: blinkYellow 9s infinite;
            animation-delay: 3s;
        }

        .green {
            background-color: green;
            animation: blinkGreen 9s infinite;
            animation-delay: 6s;
        }
    </style>
</head>

<body>
    <div class="traffic-signal">
        <div class="light red animate"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
</body>

</html>

Output:

How to Create a Dot loading Animation using HTML and CSS?

subramanyasmgm

Improve

Article Tags :

Design a Traffic Light Animation using HTML and CSS

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?