CSS Blink Animation | Simple Blinking Text Or Element

The CSS blink animation creates a flashing effect by toggling the visibility of an element using the @keyframes rule. It is useful for attention grabbing text, such as alerts or notifications. You can control the blinking speed and make the animation run infinitely.

Contents

  1. Blinking Animation
  2. Smooth Blinking
  3. Fast Blinking
  4. Steps Based Blinking

Blink Animation HTML and CSS code

Demo blink animation

Blinking Text
HTML
<div class="text-style blink">Blinking Text</div>
CSS
.text-style {
    font-size: 24px;
    color: #056bfd;
    font-weight: bold;
    display: block;
    text-align: center;
}

/* CSS Blink Animation */
.blink {
    animation: blink-animation 1s steps(1, start) infinite;
}

@keyframes blink-animation {
    50% {
        visibility: hidden;
    }
}
Run codeTry it yourselfDownload

CSS Smooth Blink Animation Code

Smooth Blink Text
HTML
<div class="text-style blink-smooth">Smooth Blink Text</div>
CSS
.text-style {
    font-size: 24px;
    color: #056bfd;
    font-weight: bold;
    display: block;
    text-align: center;
}

/* CSS Smooth Blink Animation */
.blink-smooth {
    animation: blink_smooth 1s infinite;
}

@keyframes blink_smooth {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
Run codeTry it yourselfDownload

Fast Blinking Animation CSS Code

Fast Blink Text
HTML
<div class="text-style blink-fast">Fast Blink Text</div>
CSS
.text-style {
    font-size: 24px;
    color: #056bfd;
    font-weight: bold;
    display: block;
    text-align: center;
}

/* CSS Fast Blink Animation */
.blink-fast {
    animation: blink_fast 0.5s infinite
}

@keyframes blink_fast {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}
Run codeTry it yourselfDownload

Steps Based Blinking Animation CSS Code

Steps Based Blink Text
HTML
<div class="text-style blink-steps">Step Blink Text</div>
CSS
.text-style {
    font-size: 24px;
    color: #056bfd;
    font-weight: bold;
    display: block;
    text-align: center;
}

/* CSS Steps Based Blink Animation */
.blink-steps {
    animation: blink_steps 1s steps(5, start) infinite;
}

@keyframes blink_steps {
    to {
        visibility: hidden;
    }
}
Run codeTry it yourselfDownload

Related: