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