Animating objects by applying CSS transitions



Transition property

Transitions provide a mechanism to alter the style of an object such that the change occurs in a visible gradual fashion.

You have the ability to control which style property gets altered and how long it takes to complete its transition from one style to the other.

Transition allows you to specify a comma-separated list of CSS properties and a length of time for the transition of the specified property to take place.

The following table outlines the transition's properties:

Transition Property Description
transition-property Specifies the property to which a transition will be applied
transition-duration Specifies how much time the transition should take from start to finish
transition-delay Specifies how long to wait from the time the property is changed before starting the transition

The code below demonstrates the transition property:

<head>
<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: gray;
        margin-left: 250px;
        margin-top: 50px;
        margin-bottom: 50px;
        transition: background-color 1s, margin-left 2s;
        }
    div:hover {
        margin-left: 350px;
        background-color: white;
    }
</style>
</head>
<body>
   <h2>transition: background-color 1s, margin-left 1s;</h2>
    <div>
        DIV1 TRANSITION EFFECTS
    </div>
</body>

Transition Timinig

Another property that exists to control the speed of the transitions is transition-timing-function.

With the transition-timing-function property, you can specify some different effects to the timing of the transition.

The following Table uotlines the possible values for the transition-timing-function

Value Description
ease The default value that applies the effect in such a way that it starts slow, speeds up, then ends slow.
linear Makes the transition constant from start to finish
ease-in Causes the transition to have a slow start.
ease-out Causes the transition to have a slow finish.
ease-in-out Causes the transition to have a slow start and a slow finish.
cubic-bezier Allows you to define values. This takes four parameters that are values from 0 and 1.

The code below demonstrates the transition-timing-function:

<head>
<style type="text/css">
    #div2 {
        width: 200px;
        height: 200px;
        color:white;
        font-size: x-large;
        background-color: grey;
        margin-left: 250px;
        margin-top:50px;
        margin-bottom: 50px;
        /*transform: rotate3d(1,1,1, 30deg);*/
        transition: transform 2s ease-in-out;            
       }
    #div2:hover {
        /*transform: rotateX(30deg)  rotateY(30deg) rotateZ(30deg);
        transform: rotate3d(1,1,1, 30deg);*/
        transform:  scale3d(.3, .3, 1.2);
    }
</style>
</head>
<body>
    <h2>transform:  scale3d(.3, .3, 1.2);</h2>
    <div id="div2">
        DIV2 TRANSITION EFFECTS
    </div>
</body>

PROMOTIONS