Table of Contents

About

Transition in CSS.

Transition properties create smooth transitions (using timing functions) between different values property of two different element state.

Properties

The transition short property is 

CssSelector {
    transition: <property> <duration> <timing-function> <delay>;
}

where:

  • transition-duration: Specifies the duration over which transitions should occur.
  • transition-property: : Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions
  • transition-timing-function: Specifies a timing function to define how intermediate values for properties are computed.
  • transition-delay: Defines how long to wait between the time a property is changed and the transition actually begins.

Example

The box below combines transitions for: 

/* Default element state */
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    /* Transitions timing */
    transition: width 2s, height 2s, background-color 2s, transform 2s;
    /* Transitioned Property */
    width: 50px;
    height: 50px;
    background-color: #0000FF;
}
/* Hover element state */
.box:hover {
    width: 100px;
    height: 100px;
    background-color: #FFCCCC;
    transform: rotate(180deg);
}

<div class="box"></div>

Hover over the box to see these properties animated.

Rendered by WebCode

Documentation / Reference