CSS - Transitions

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

Viz - (Animated) Transition in CSS.

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

2 - 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.
Advertising

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

4 - Documentation / Reference

web/css/transition.txt · Last modified: 2019/02/09 11:43 by gerardnico