How to Apply Blinking Text Effect with HTML and CSS

Introduction

A blinking text effect can grab attention and create a dynamic visual impact. This can be achieved using CSS @keyframes combined with the visibility or opacity property to toggle the text's visibility at intervals.

In this tutorial, you'll learn how to create a blinking text effect using HTML and CSS.

Problem Statement

Create a CSS code that:

Animates text to blink on and off using @keyframes and visibility or opacity.
Demonstrates how to control the blink speed and repetition.

Example:

Input: A paragraph element with the text "Blinking Text".
Output: The text blinks continuously.

Solution Steps

Use @keyframes for Blinking Animation: Define keyframes to animate the visibility or opacity of the text.
Apply the Blinking Effect to Text: Use the animation property to control the blinking speed and repetition.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blinking Text Effect</title>
    <style>
        /* Step 1: Define keyframes for blinking text */
        @keyframes blink {
            0% {
                opacity: 1; /* Fully visible */
            }
            50% {
                opacity: 0; /* Invisible */
            }
            100% {
                opacity: 1; /* Fully visible */
            }
        }

        /* Step 2: Apply blinking effect to text */
        .blinking-text {
            font-size: 2rem;
            color: #e74c3c;
            font-family: Arial, sans-serif;
            animation: blink 1s infinite; /* 1-second blink, infinite loop */
            text-align: center;
            margin-top: 100px;
        }

        /* Center the text container */
        .container {
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <p class="blinking-text">Blinking Text Effect</p>
    </div>

</body>
</html>

Output

Explanation

Step 1: Define `@keyframes` for Blinking Text

The @keyframes rule defines the blinking effect by alternating the opacity between 1 (fully visible) and 0 (invisible):

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

At 0% and 100%, the text is fully visible, and at 50%, it becomes invisible, creating the blinking effect.

Step 2: Apply the Blinking Effect to Text

To apply the blinking animation, use the animation property:
```
.blinking-text {
    animation: blink 1s infinite;
}
```
The 1s specifies that the text will blink every second, and infinite ensures the animation loops continuously.

Step 3: Center the Text

Use text-align: center to center the text within the container:

.container {
    text-align: center;
    margin-top: 100px;
}

Conclusion

Creating a blinking text effect in CSS is simple using @keyframes and the opacity property. This effect can be useful for drawing attention to important information and making your text blink at a set interval to create a dynamic visual impact on your web page.

Java Guides

Search This Blog