Create blinking alertbar using css3

Want to create a area attracted or catchy?Nice blinking alertbox is your best option.you can do easily using css3 animations.

1.HTML

  <section id="alertbox"><span>this is a alert</span> </section>

 This is very simple html code.hope you understand this.i used html5.as everyone is crazy about it right now.you can use a simple div if you want.

2.CSS3

Css code is below

body{
                background-color: #000;
            }
            #alertbar{
                width: 800px;/* width of the alert box */
                height: 30px;/* height of the alert box*/
                margin-left: 200px;
                background-color: #fff;
                  border-radius:3px;
 -moz- border-radius:3px;
 -webkit-border-radius:3px;
 -o- border-radius: 3px;
     animation: alert 1.5s infinite;/* css3 Animation name is alert 1.5 is animation time infinite- is no. of time this animation will run */
-moz-animation: alert 1.5s infinite; /* Firefox */
-webkit-animation: alert 1.5s infinite; /* Safari and Chrome */
-o-animation: alert 1.5s infinite; /* Opera */
-moz-box-shadow: 2px 0px 3px rgb(0, 0, 0);
    -webkit-box-shadow: 2px 0px 3px rgb(0, 0, 0);
    box-shadow: 2px 0px 3px rgb(0, 0, 0);
        margin-top: 100px;
        text-align:center;
   
            }
            /* this alert text styling */
            #alertbar span{
    margin-top: 3px;
    display: block;
    padding-top: 3px!important;
    vertical-align:middle;
    text-transform: capitalize;
    color: #ddd;
}
/* alert animation*/
            @keyframes alert
{
0%   {background:#161616;}

100% {background: #0181EB;}
}

@-moz-keyframes alert /* Firefox */
{
0%   {background: #161616;}

100% {background: #0181EB;}
}
@-o-keyframes alert /* Firefox */
{
0%   {background: #161616;}

100% {background: #0181EB;}
}
@-webkit-keyframes alert
{
0%   {background: #161616;}

100% {background: #0181EB;}
}

This is basic css you need to create the animation.

Understand  the css

1.  I used a simple css animation that finishes in 1.5 sec.it just changes the background color.You can check out w3school to understand css3 animation.
2. Alert is the animation name i created.
3. The animation  repeats  infinite time.if you want to run the animation for specific number of times.just replace infinite in css to number.
4. #161616 and #0181EB are the color code i used in the animation. you can change it if you want.

Its very simple i guess.let me know you liked it or not. 

Bye bye for now.