CSS - Transitions


Viz - (Animated) Transition in CSS.

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


The transition short property is

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


  • 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.


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.

Documentation / Reference

Discover More
Card Puncher Data Processing
D3 (Data-Driven Documents)

“D3” stands for Data-Driven Documents. The data refers to the thing you want to visualize, and the document refers to its visual representation. It’s called a “document” because D3 is based on...
Utah Teapot
Data Vizualisation - Animation

Animation is defined as a series of steps from one object state to another through transition. Animations in web browsers come in two forms: native (declarative ones), such as the element...

Share this page:
Follow us:
Task Runner