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 Timing

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 outlines 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>

Ads Right