Transition delays

You will notice the final parameter is a delay - this let's you trigger things after an event has occurred. Below is a small demo showing this functionality.




in  html flies >>>>>

   

   

   

   

   

        

   

   

   

Hover on me

       

//////////  css style //////

#delay_demo {
    position:relative;       
    width:500px;
    height:400px;
    margin:0 auto 10px;
    border:1px #aaa solid;
    padding:10px;
}
#dd_main {
    width:100px;
    height:100px;
    position:absolute;
    top:160px;
    left:210px;
    background-color:red;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;       
    -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;   
}
#delay_demo .center {
    width:500px;
    position:absolute;
    bottom:20px;
}
#dd1, #dd2, #dd3, #dd4, #dd5, #dd6, #dd7, #dd8 {
    width:20px;
    height:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;   
    position:absolute;
    top:200px;
    left:250px;   
    background-color:blue;
    -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;   
    /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in on iOS */
    -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);   
}

    #dd1 {
        -webkit-transition-delay: 0.1s;
    }
    #dd2 {
        -webkit-transition-delay: 0.2s;
    }
    #dd3 {
        -webkit-transition-delay: 0.3s;
    }
    #dd4 {
        -webkit-transition-delay: 0.4s;
    }
    #dd5 {
        -webkit-transition-delay: 0.5s;
    }
    #dd6 {
        -webkit-transition-delay: 0.6s;
    }
    #dd7 {
        -webkit-transition-delay: 0.7s;
    }
    #dd8 {
        -webkit-transition-delay: 0.8s;
    }
#delay_demo:hover #dd_main {
    opacity:0;
}
#delay_demo:hover #dd1, #delay_demo.hover_effect #dd1 {
    -webkit-transform: translate(-250px,-200px);
        -moz-transform: translate(-250px,-200px);
        -o-transform: translate(-250px,-200px);
        -ms-transform: translate(-250px,-200px);
        transform: translate(-250px,-200px);}
#delay_demo:hover #dd2, #delay_demo.hover_effect #dd2 {
    -webkit-transform: translate(0,-200px);
        -moz-transform: translate(0,-200px);
        -o-transform: translate(0,-200px);
        -ms-transform: translate(0,-200px);
        transform: translate(0,-200px);   
}
#delay_demo:hover #dd3, #delay_demo.hover_effect #dd3 {
    -webkit-transform: translate(250px,-200px);
        -moz-transform: translate(250px,-200px);
        -o-transform: translate(250px,-200px);
        -ms-transform: translate(250px,-200px);
        transform: translate(250px,-200px);}
#delay_demo:hover #dd4, #delay_demo.hover_effect #dd4 {
    -webkit-transform: translate(250px, 0);
        -moz-transform: translate(250px, 0);
        -o-transform: translate(250px, 0);
        -ms-transform: translate(250px, 0);
        transform: translate(250px, 0);   
}
#delay_demo:hover #dd5, #delay_demo.hover_effect #dd5 {
    -webkit-transform: translate(250px,200px);
        -moz-transform: translate(250px,200px);
        -o-transform: translate(250px,200px);
        -ms-transform: translate(250px,200px);
        transform: translate(250px,200px);   
}
#delay_demo:hover #dd6, #delay_demo.hover_effect #dd6 {
    -webkit-transform: translate(0,200px);
        -moz-transform: translate(0,200px);
        -o-transform: translate(0,200px);
        -ms-transform: translate(0,200px);
        transform: translate(0,200px);   
}
#delay_demo:hover #dd7, #delay_demo.hover_effect #dd7 {
    -webkit-transform: translate(-250px,200px);
        -moz-transform: translate(-250px,200px);
        -o-transform: translate(-250px,200px);
        -ms-transform: translate(-250px,200px);
        transform: translate(-250px,200px);   
}
#delay_demo:hover #dd8, #delay_demo.hover_effect #dd8 {
    -webkit-transform: translate(-250px,0);
        -moz-transform: translate(-250px,0);
        -o-transform: translate(-250px,0);
        -ms-transform: translate(-250px,0);
        transform: translate(-250px,0);   
}