Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Transition Property

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 70
    Comment on it

     Transition properties allows you to change the values of a element over a predefined duration, animating the property changes, as opposed to having them happen instantly. Over a given duration, CSS3 transition property permits to change property estimations easily starting from one value to another. 

    You need to indicate following two steps while creating a transition effect,

    • the CSS property to which you want to add an effect
    • the duration of the effect
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
        width: 100px;
        height: 100px;
        background: rgb(36,110,164);
        -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s;
    }
    
    div:hover {
        width: 100%;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p>Hover over the div element, to see the transition effect.</p>
    
    </body>
    </html>

    Note :- This example does not work in Internet Explorer 9 and earlier versions.

    Transition Property allows you to control animation speed. There are following four properties to control transition :-

    1. transition-property :- It allows the name or names of the CSS properties.
    2. transition-duration :- Determines how long or milliseconds of time the transition effect takes to finish.
    3. transition-timing-function :- Determines the speed curve of the transition effect.
    4. transition-delay :- Defines to what extent to hold up between the time a property is changed and the move really starts.

     

 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: