Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 transition with demo

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 377
    Comment on it

    With the help of CSS3 new properties, we can transit an element from one position to another with the help of few properties.
    It provide you to control the values of the element property for a particular duration of time.
    There are two steps involved the transition of an element:
    1. The property that we want to add
    2. The duration

    We have to use -webkit, -moz, etc certain prefix as an property for certain browsers.
     

    HTML:

    <div class="transit"></div>

    CSS3:

    div.transit {
        width: 100%;
        height: 100px;
        background: blue;
        /* For Safari 3.1 to 6.0 */
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
        -webkit-transition-delay: 1s;
        /* Standard syntax */
        transition-property: height;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
    	cursor:pointer;
    }
    
    div.transit:hover {
        height: 500px;
    }
    

    You can also download the demo attached.

 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: