CSS Animations

Creating animations with pure CSS (without JavaScript or other languages) is possible but is fairly limited. The rules of what is possible with CSS alone are as follows.

  • CSS Animations can only affect CSS properties.
  • Each property can only go between two values with each animation.
  • They can only be triggered by most conditional selectors that rely on user behavior.

Here is a simple transition wherein we will change the width of a simple square shape. To activate the transition just move your mouse onto the square and leave it there.

All animations can be accomplished with a single property, the transition property. Let's look at one way the effect above could be accomplished.


#box {
    position:relative;	
    width:150px;
    height:150px;
    outline:1px solid black;
    background-color:lightblue;
    transition: width 1s;
}

#box:hover {
    width:700px;
}

The only line you may not recognize is the transition property. As you can see the actual structure of the transition property is simple and follows a very basic structure. It makes use of A: the property to be changed and B: the time over which that change should occur.

The value that the given property will transition from appears in the same css entry as the transition. The value that the given propert will transition towards is defined by a new selector id and/or class that has some kind of pseudo selector associated with it. In the example above "hover" provides the condition under which our transition will take place.

All transition entires adhere to the following guidelines.

  • Transition time is measured in seconds, can be a decimal number, and is denoted by an "s" at the end of the value.
  • Multiple transition values can be entered with a single transition property.
  • Each transition target must be seperated by a comma (for example "width 1s, height 1s").

Again, though the "hover" pseudo selector is the most obvious way of showing the effects of various transitions you should (depending on the browser) be able to use transitions in conjunction with any selector that relies on a user-fullfilled condition.

For instance, the "active" pseudo selector will apply new properties to an element that is currently being clicked on (and lasts as long as the mouse button is held down). The "active" pseudo selector is usually used to style text links to other pages but we can actually use it with almost any referenced element.

Let's look at another transition, but this time we'll change multiple values, each over a different period of time, and use the "active" pseudo selector at the same time. To activate the animation this time Left-Click and Hold on the box below.

The code for this second example is not all that different from the first. Take note of how the background color is set to change over only half a second while the width is set to change over two seconds and how that was reflected in the animation.


#box {
    position:relative;	
    width:150px;
    height:150px;
    outline:1px solid black;
    background-color:lightgreen;	
    transition: width 2s, 
    		background-color 0.5s;
}

#box:active {
    width:700px;
    background-color:pink;
}

As you can see adding the second transition was as simple as adding another property, a time value, and seperating the new propert with a comma. The new value for the changing property is then added to the input-dependent selector.

Be aware that properties that have have predefined values can not be altered with a transition. For instance the "visibility" property takes either "hidden" or "visible" as a value which are words that can not be transitioned between. In that particular case you can use the "opacity" property instead but the problem will still manifest in other cases such as "overflow" or the "display" property which takes very particular predefined values. As a rule of thumb only properties that take numerical values should have transitions applied to them.

Other pseudo selectors that can use be used with animations besides "hover" or "active" are specific to HTML forms.

  • :focus (for use with forms)
  • :checked (for use with radio buttons in forms)
  • :disabled (also for forms)

One final thing to keep in mind when using transitions like these is that the transition will remain in effect as long as the conditions of the selector are fullfilled. What this means is that, as with the first example on this page that uses the "hover" pseudo selector, if the mouse remains over the new dimensions of the object it will continue to hold the transition. The old dimensions make no difference for the case of the "hover" selector.

Transition "Easing"

Well go over the following next week.

Transitions puzzles

Well go over the following next week.

Example links

Just for fun and study, here are some helpful links to examples written by other CSS artists.

This page at littlesnippets.net has several examples of animated menus which are accented using simple line shapes and CSS transitions.