Fade-in effect using CSS3 @keyframes Rule

    With CSS3 @keyframes rules, we can make a fade-in effect for any HTML element we want. In

following code, we are just changing the opacity of an element on two different @keyframes

states. We can increase the fade-in time by animation-duration property.

    HTML Code

        <div class="col1 effect one"> </div>
        <div class="col2 effect two"> </div>
        <div class="col3 effect three"> </div>

    CSS Code

    copytext

        .col1 ,.col2 ,.col3 {border-radius:15px;float: left;padding: 0px 10px;background:

#f9fde4;border: 1px solid #009c65;box-shadow:-8px 10px 0px #adc4d2;}
        .effect {
            opacity:0;
            -webkit-animation:fadeIn ease-in 1;
            -moz-animation:fadeIn ease-in 1;
            animation:fadeIn ease-in 1;
            -webkit-animation-fill-mode:forwards;
            -moz-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
            -webkit-animation-duration:1s;
            -moz-animation-duration:1s;
            animation-duration:1s;
        }
        @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
        @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
        @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
        .effect, .one {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
        }
        .effect, .two {
        -webkit-animation-delay: 1.2s;
        -moz-animation-delay:1.2s;
        animation-delay: 1.2s;
        }
        .effect, .three {
        -webkit-animation-delay: 1.6s;
        -moz-animation-delay: 1.6s;
        animation-delay: 1.6s;
        }

For such more blogs kindly visit http://findnerd.com/NerdDigest