Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Fade-in effect using CSS3 @keyframes Rule

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.16k
    Comment on it

    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

    .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;
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: