CSS Transitions For Frontend Engineers

© 1 September, 2013, Martin Rinehart

CSS3 features transitions, changes in element styles that morph from one value to another over time.

MSIE 9 and below do not support transitions.

Transition Hover Demonstrations

Transitions are well along in the standards process and are widely implemented. They may be defined on any style that is animatable (generally a numeric or color specification). They replace the default immediate change with a gradual change. Hover over the following divs to see the transitions. (Note: this is done entirely with CSS, not JavaScript. Major browsers do not require vendor prefixes (add -webkit-transition: ... for older phones).

Size Transitions

trn-00
Width: 150 to 210,
no transition.


Abrupt change!
trn-01
Width: 150 to 210
in 2 seconds.


Easy does it. 
#trn-01 {
    background:      #f0f0ff;
    border:          #a0a0ff ridge 3px;
    cursor:          default;
    height:          40px;
    margin-bottom:   20px;
    padding:         20px;
    position:        relative;
    transition:      width 2s;
    width:           150px;
}

#trn-01:hover {
    background:      white;
    cursor:          pointer;
    width:           210px;
}

To turn the instant change into a smooth, two-second transition, add exactly one line to the trn-00 styles.



trn-02
Border-width, no transition.



trn-03
Border-width: 3px to 10px in 1 seconds.



#trn-03 {
    background:      #f0f0ff;
    border:          #a0a0ff ridge 3px;
    cursor:          default;
    height:          40px;
    margin-bottom:   20px;
    padding:         20px;
    position:        relative;
    transition:      border-width 1s;
    width:           150px;
}

#trn-03:hover {
    background:      white;
    cursor:          pointer;
    border-width:    10px;
}



A single line replaces the abrupt change with a smooth, one-second transition.

Color Transitions

trn-04
Background (2s) and border (0.5s) colors.


Danger! 
#trn-04 {
    background:      #f0f0ff;
    border:          #a0a0ff ridge 3px;
    cursor:          default;
    height:          40px;
    margin-bottom:   20px;
    padding:         20px;
    position:        relative;
    transition:      background-color 2s, border-color 0.5s;
    width:           150px;
}

#trn-04:hover {
    background:      #ffd0b0;
    border-color:    red;
    cursor:          pointer;
}



Change the border color (half a second) and the background color (two seconds).

Font-Size Transitions

trn-05
Font &
border-width.


Important! 
#trn-05 {
    background:      #f0f0ff;
    border:          #a0a0ff ridge 3px;
    cursor:          default;
	font-size:       10pt;
    height:          40px;
    margin-bottom:   20px;
    padding:         20px;
    position:        relative;
    transition:      border-width 0.35s,
                     font-size 0.35s;
    width:           150px;
}

#trn-05:hover {
    background:      white;
    border-width:    10px;
    cursor:          pointer;
    font-size:       15pt;
}



Swell the font size and the border.

Use a more readable code style.

Shape (Border-Radius) Transitions

trn-06
Border radii.
Lea rules!


Shapes, just for fun!
(Lea Verou on "The Humble Border-Radius"). 
#trn-06 {
    background:      #f0f0ff;
    border:          #a0a0ff ridge 3px;
    border-radius:   80px 20px 80px 20px;
    cursor:          default;
    height:          40px;
    margin-bottom:   20px;
    padding:         20px;
    position:        relative;
    border-radius:   80px 20px 80px 20px;
    font-size:       6pt;
    transition:      border-radius 2s,
                     border-width 2s,
                     font-size 0.5s;
    width:           150px;
}

#trn-06:hover {
    background:      white;
    border-radius:   20px 80px 20px 80px;
    border-width:    10px;
    cursor:          pointer;

Feedback: MartinRinehart at gmail dot com

# # #