Understanding CSS3 Transitions With Examples

Discussion in 'Web Design, HTML And CSS' started by MinalS, Oct 30, 2014.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    32
    Trophy Points:
    0
    Transitions in CSS3 are useful when user wants to add the effect and the amount of time in which the effect should last. There are several properties used by CSS3 for styling that are explained in the article.

    1. hover

    The user wants to modify the element size when the mouse cursor moves is known as hover effect. The amount of time for which the effect should occur is specified in seconds. The default value is 0.

    Consider the following code snippet to demonstrate the effect.

    Code:
    <html>
    <head>
    <style>
    div
    {
        width:100px;
        height:80px;
        background:red;
        transition: width 2s;
    }
    
    div:hover
    {
        width:250px;
    }
    </style>
    </head>
    </html>
    
    The output generating the hover effect is as shown below:

    [​IMG]

    2. transition – property

    The transition property specifies the name of the CSS property the effect for which the transition occurs.

    The syntax for the transition property is as shown below:

    Code:
    transition-property: none | all | property | initial | inherit;
    The property values are as mentioned below:
    1. none: It states that there is no transition effect
    2. all: It is the default value for the transition. All the properties will be assigned with the effect.
    3. property: It defines a comma separated list of the CSS property names for the effect
    4. initial: It sets the property to this default value.
    5. inherit: It inherits this property from the parent element.
    Consider an example for showing the transition effect on the element.

    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 100px;
        height: 100px;
        background: blue;
        transition-property: width height;
        transition-duration: 2s;
    }
    
    div: hover
    {
        width:350px;
        height: 300px;
    }
    
    </style>
    </head>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    3. transition-delay

    The transition delay property specifies when the transition effect will start for the specified element. The delay value can be specifies in seconds or milliseconds.

    The syntax for the transition – delay property is as shown below:

    Code:
    transition-delay: time | initial | inherit;
    The values for the property are explained below:
    1. time: It is used to specify the time in seconds or milliseconds to wait for the effect to start
    2. initial: It sets the property to the default value.
    3. inherit: It inherits the property from the parent element.
    Code:
    <html>
    <head>
    <style>
    div
    {
        width:100px;
        height: 100px;
        background: green;
        transition-property: width;
        transition-delay:2s;
    }
    div:hover
    {
        width: 300px;
    }
    </style>
    </head>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    4. transition-duration

    The transition duration property is used to specify the time in seconds or milliseconds a effect takes to complete.

    The syntax for the transition duration is as shown below:

    Code:
    transition-duration: time | initial | inherit;
    The values in the property are as shown below:
    1. time: It specifies how many seconds or milliseconds the effect takes to complete. The default value is 0 stating that no effect will be applied.
    2. initial: It sets the property to the default value
    3. inherit: The values are inherited from the parent element.
    The example to demonstrate the transition duration is as shown below:
    Code:
    <html>
    <head>
    <style>
    div
    {
        width:120px;
        height: 120px;
        background: red;
        transition-property: width;
        transition-duration: 4s;
    }
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    5. Transition – timing – function

    The transition timing function property specifies the speed of the effect from the start point to the end. It is used to state the speed curve of the transition effect. The speed of the effect can change at any moment of duration specified by the user.

    The syntax for the transition timing function is as shown below:
    Code:
    transition-timing-function : ease | linear | ease – in | ease – out | ease – in – out | cubic – bezier () | initial | inherit;
    
    The property values are as mentioned below:
    1. ease: It is the default value of the function. It states that the transition effect will start slowly, gradually increase the speed and then end slowly
    2. linear: It specifies that the transition effect with the same speed from the start to the end of the transition
    3. ease –in: It specifies that the transition effect with the slow start
    4. ease – out: It specifies the effect with slow end
    5. ease-in-out: It specifies the effect with slow start and end
    6. cubic-bezier(n,n,n,n): It defines the values in the cubic bezier function. The values can be from 0 to 1
      [*initial: It is used to set the property to the default value
    7. inherit: It inherits the property from the parent element
    Consider the examples for demonstrating the properties showing the effects.

    1. linear

    The following code snippet demonstrates the linear functionality.

    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 100px;
        height:80px;
        background: blue;
        color: black;
        transition: width 2s;
    }
    #div1 { transition –timing-function: linear; }
    
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    <body>
    
    <div id=”div1”>linear</div>
    
    </body>
    </html>
    
    The output for the following code is as shown below:

    [​IMG]

    2. ease

    The following code demonstrates the ease functionality.
    Code:
    <html>
    <head>
    <style>
    
    div
    {
        width: 100px;
        height:80px;
        background: blue;
        color: black;
        transition: width 2s;
    }
    #div2 { transition –timing-function: ease; }
    
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    <body>
    
    <div id=”div2”>ease</div>
    
    </body>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    3. ease –in

    The following code snippet demonstrates the ease – in functionality.
    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 100px;
        height:80px;
        background: blue;
        color: black;
        transition: width 2s;
    }
    #div3 { transition –timing-function: ease-in; }
    
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    <body>
    
    <div id=”div3”>ease-in</div>
    
    </body>
    </html>
    
    The following output is generated through the ease – in effect.

    [​IMG]

    4. ease – out

    The following code snippet demonstrates the ease out effect.
    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 100px;
        height:80px;
        background: blue;
        color: black;
        transition: width 2s;
    }
    #div4 { transition –timing-function: ease-out; }
    
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    <body>
    
    <div id=”div4”>ease-out</div>
    
    </body>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    5. ease – in –out

    The following code snippet demonstrates the ease – in –out functionality.
    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 100px;
        height:80px;
        background: blue;
        color: black;
        transition: width 2s;
    }
    #div5 { transition –timing-function: ease-in-out; }
    
    div: hover
    {
        width: 300px;
    }
    </style>
    </head>
    <body>
    
    <div id=”div5”>ease-in-out</div>
    
    </body>
    </html>
    
    The output for the code is as shown below:

    [​IMG]

    6. Shorthand transitions

    The transition is a shorthand property used to state the four transition related longhand properties.

    The syntax for the transition is as shown below:
    Code:
    transition: [ transition – property] [ transition –duration] [ transition-timing-function] [ transition-delay];
    
    The property states that the values can be changed over the specified time duration.

    Consider the following example to demonstrate the transition property.
    Code:
    <html>
    <head>
    <style>
    div
    {
        width: 150px;
        height:150px;
        background: red;
        transition: background-color 2s ease-out;
    }
    
    div: hover
    {
        background-color: green;
    }
    </style>
    </head>
    </html>
    
    The output before the transition property is applied is as shown below:

    [​IMG]

    The output after the transition property is applied is as shown below:

    [​IMG]

    Transitioning States

    The transition effect is possible on the states other than the :hover state. If the user wants the transition to happen on the :focus or :active states, it is possible. The declaration for the transition is done in the :hover state and is declared only once in the code.

    Consider the following example to demonstrate the use of the transition states.

    Code:
    
    a.new1
    {
        background: #9999;
        transition : background 0.4s ease;
    }
    a.new1: hover;
    a.new1 : focus 
    {
        background: #666c;
    }
    
    
    Transitioning all the possible properties

    The all value is used to specify the properties for listing the multiple properties. All the available properties will be transitioned by the user.

    Consider an example where user is using all element to change the background and color.
    Code:
    a.new1
    {
        background: #932c;
        transition : all 1s ease-in;
    }
    a.new1:hover;
    a.new1:focus
    {
        color: #ffff;
        background: #666f;
    }
    
     
    Last edited by a moderator: Jan 21, 2017

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice