Course notes 10
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

CSS3 Transitions

CSS3 Transitions allow you to create smooth animations between properties that change in response to some event. Instead of the new value of the property replacing the old, the first value will smoothly change into the second value.

Any event which causes a property to change can be the cause of a transition. These include :hover events, adding/removing classes, :focus events, or any other mouse event.

Many properties that have variable values can be transitioned. Some common ones include background-color, opacity, position, and margin. A full list of all the transition-capable properties can be see at the W3C.


The transition syntax looks like this:

transition: property timespan easing;

property - the actual thing you want to activate the transition when it changes. You can also set this to all, which will trigger the transition on any property which changes.

timespan - how long you want the transition to last in seconds. Decimal values are acceptable, and the number is suffixed with an "s".

easing - different easing types can be applied to the transition, mimicking the effect in other types of animation. Acceptable values include ease, linear, ease-in, ease-out, and ease-in-out.


Transitions have support in Webkit, Mozilla, and Opera browsers. At this time you must use vendor prefixes to successfully target all the capable browsers.

    ul#links li {
        width:100px;
        padding:10px;
        background-color:rgba(255,0,0,0);
        margin:5px; 
        list-style:none;
        text-align:center;
        -webkit-transition: background-color .5s ease-in-out;
        -moz-transition: background-color .5s ease-in-out;
        -o-transition: background-color .5s ease-in-out;
        transition: background-color .5s ease-in-out;
    }
    
    ul#links li:hover {
        background-color:rgba(255,0,0,1);
    }
    

The placement of the transition declarations may at first seem confusing, but by placing them on the initial state of the element, they can be activated by any change that happens to the element. In this situation, if we had different styles on the :focus for example, the transitions would still fire on :hover and :focus. However, if we had the transitions on the :hover, the transition would only be triggered on :hover.