CSS - Transitions

About

Viz - (Animated) 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:

• width,
• height,
• background-color,
• transform.

/* 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.

Documentation / Reference

• TR/css3-transitions/
• en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions