Background and border blinking animation using CSS3

Goal is to make a box, input, etc, anything that has a border to blink with using css3, no JavaScript with infinite loops!

<style>
    @-webkit-keyframes blink {
        0% {
            background: rgba(255,0,0,0.5);
        }

        50% {
            background: rgba(255,0,0,0);
        }

        100% {
            background: rgba(255,0,0,0.5);
        }
    }

    @keyframes blink {
        0% {
            background: rgba(255,0,0,0.5);
        }

        50% {
            background: rgba(255,0,0,0);
        }

        100% {
            background: rgba(255,0,0,0.5);
        }
    }
    @-webkit-keyframes blinkingBorder {
        0% {
            border-color: rgba(255,0,0,0.5);
        }

        50% {
            border-color: rgba(255,0,0,0);
        }

        100% {
            border-color: rgba(255,0,0,0.5);
        }
    }

    @keyframes blinkingBorder {
        0% {
            border-color: rgba(255,0,0,0.5);
        }

        50% {
            border-color: rgba(255,0,0,0);
        }

        100% {
            border-color: rgba(255,0,0,0.5);
        }
    }

    #animate {
        height: 100px;
        width: 100px;
        background: rgba(255,0,0,1);
    }

    #animate {
        -webkit-animation-direction: normal;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: blink;
        -webkit-animation-timing-function: ease;
        animation-direction: normal;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-name: blink;
        animation-timing-function: ease;
    }
    #animate2 {
        border-color: rgba(255,0,0,1);
    }

    #animate2 {
        -webkit-animation-direction: normal;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: blinkingBorder;
        -webkit-animation-timing-function: ease;
        animation-direction: normal;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-name: blinkingBorder;
        animation-timing-function: ease;
    }
</style>

Print | posted @ Friday, March 20, 2015 7:33 AM

Comments on this entry:

Gravatar # re: Background and border blinking animation using CSS3
by milon at 3/24/2015 2:07 AM

I enjoyed your post. I don't know this command of css3. After reading your post i can do this. Thanks a lot for this post.
research paper
Gravatar # re: Background and border blinking animation using CSS3
by deals.adsgoose at 7/4/2015 12:21 AM

attractive piece of information, I had come to know about your blog from my friend arjun, ahmedabad,i have read atleast eleven posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a lot once again, Regards, Deals.AdsGoose
Post A Comment
Title:
Name:
Email:
Comment:
Verification: