How to Create Blink Animation in CSS?

Leave a Comment / CSS, HTML / By

In this blog, you will learn to create Blink Animation in CSS. Blinking Text is used to flash text on the screen in different colors in a particular interval of time. Let us know more about it in detail:- 

Blink text animation in CSS

We will achieve this blinking text using the animation property under that particular tag. With the help of this animation property, we will set the time interval of the blink animation. After using it we will use the CSS keyframe attribute to set the colors and time interval for the text. The Code and Output to create blink animation in css is:-

<html>
    <head>
        <title> Blink Text Anim </title>
        <style>

            .a{
                animation: blinking 1.5s infinite;
                font-size: 30px;
            }

            @keyframes blinking {
                0% { color: aquamarine}
                38% { color: cornflowerblue}
                67% { color: teal}
                100% { color: crimson}
            }

        </style>
    </head>

    <body>
        <h1> Codeblockx </h1>
        <h2> Solution of all your Coding Solution </h2>
        <p class=”a”> This is a blinking text </p>
    </body>

</html>

OUTPUT

Blink Text in css

This is a Blinking Text.


Hope this blog post was helpful to you and you have got the answer to your question. Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Till then check out our more blog posts on html and CSS. They will help you out.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *