Thursday 14 May 2015

Blinking Effect by Css



To use above effect just write down the following CSS rules in HEAD section or in external css file :


.blinking{
    animation-name: blinking;   /*  animation name which is attached to .blinking class */
    animation-duration:1s;
      animation-iteration-count:infinite;   /*this effect will run for infinite times*/
      animation-direction: alternate;  

}


@keyframes blinking {
      from {
        opacity:1;
    }

    to {
        opacity:0.7;
    }
}

@-moz-keyframes blinking {
    from {
        opacity:1;
    }

    to {
        opacity:0.7;
    }
}

@-webkit-keyframes blinking {
     from {
        opacity:1;
     }

    to {
        opacity:0.7;
    }
}


After that just assign the class="blinking" to any HTML element to have this effect. To use this in ASP.NET add:

CssClass="blinking"

Note: Sometimes animations not work on Google Chrome, So use Mozilla Firefox


No comments:

Post a Comment