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>;
}
where:
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.