A good-looking application must provide user with visual feedback. User must always know that an order (a click, a tap or whatever) is well received and understood by the application and animations are a great tool to do so.
The new HTML 5 specification (to be honest, I should say “the new CSS 3 specification”) introduces a great tool to handle simple animations: the transitions.
According to “CSS Transitions Module Level 3” specification on W3C site, CSS3 Transitions allows property changes in CSS values to occur smoothly over a specified duration.
The aim of this article will be to first describe the concept of transitions and then to see how CSS3 Transitions works and how we can handle browsers that don’t support the feature:
- CSS3 Transitions
- Putting it all together
- Transitions without CSS3 Transitions
- Going further
In addition, I suggest you to read the “Introduction to CSS3 Animations” (by David Rousset) which is an excellent companion for this article.
To launch a game, just click on “Mix it!” and try to resolve the puzzle by clicking the cells!
The code of this game is available here.
At the beginning, the W3C CSS workgroup resisted adding transitions to CSS arguing that transitions are not really style properties. But eventually designers and developers managed to convince them that transitions is about dynamic styles and can take place in a CSS file.
According to the W3C site, CSS3 Transitions are able to animate the following types of properties: (click here to show them)
- color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
- length: interpolated as real numbers.
- percentage: interpolated as real numbers.
- integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using
- number: interpolated as real (floating point) numbers.
- transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
- rectangle: interpolated via the x, y, width and height components (treating each as a number).
- visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is “visible” and all other values are “hidden”.
- shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
- gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
- paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
- space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
- a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.
And the following properties must be supported for transitions:(click here to show them)
- background-color (color)
- background-image (only gradients)
- background-position (percentage and length)
- border-bottom-color (color)
- border-bottom-width (length)
- border-color (color)
- border-left-color (color)
- border-left-width (length)
- border-right-color (color)
- border-right-width (length)
- border-spacing (length)
- border-top-color (color)
- border-top-width (length)
- border-width (length)
- bottom (length and percentage)
- color (color)
- crop (rectangle)
- font-size (length and percentage)
- font-weight (number)
- grid-* (various)
- height (length and percentage)
- left (length and percentage)
- letter-spacing (length)
- line-height (number, length and percentage)
- margin-bottom (length)
- margin-left (length)
- margin-right (length)
- margin-top (length)
- max-height (length and percentage)
- max-width (length and percentage)
- min-height (length and percentage)
- min-width (length and percentage)
- opacity (number)
- outline-color (color)
- outline-offset (integer)
- outline-width (length)
- padding-bottom (length)
- padding-left (length)
- padding-right (length)
- padding-top (length)
- right (length and percentage)
- text-indent (length and percentage)
- text-shadow (shadow)
- top (length and percentage)
- vertical-align (keywords, length and percentage)
- visibility (visibility)
- width (length and percentage)
- word-spacing (length and percentage)
- z-index (integer)
- zoom (number)
The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html.
To declare a transition in a CSS file, you just have to write the following code:
This declaration defines that any update on any property will be done in 0.5s (and not immediately so).
You can also define your translations on a per property basis:
And finally you can use the shorthand property “transition” to define all you need in a single line:
In this shorthand version you can precise as many properties as you want separated by a comma:
For example, using IE10 if you have the following CSS3 declaration:
When you update the opacity of your tag, the current value will be animated to the new value over 0.5s with a ease timing function (which give a smooth animation).
Non linear transitions
The “transition-timing-function” line defines that the transition will not be linear but will use a timing function to produce a non linear animation.
Basically, CSS3 transitions will use cubic bezier curve to smooth the transition by computing different speed over its duration.
The following functions are supported:
- linear: Constant speed
- cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points: P0 et P1 (so you will have to define 4 values here: P0x,P0y and P1x, P1y.
- ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
- ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
- ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
- ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)
Here is a simulation tool (using SVG of course) to show the impact of each timing function:
The “transition-delay” line defines the delay between an update of a property and the start of the transition
An event is raised at the end of a transition: “TransitionEnd”. According to your browser the correct name will be:
- Chrome & Safari: webkitTransitionEnd
- Firefox: mozTransitionEnd
- Opera: oTransitionEnd
- Internet Explorer: MSTransitionEnd
The event will give you the following information:
- propertyName: Name of the animated property
- elapsedTime: The amount of time the transition has been running, in seconds
Here is an usage sample for IE10:
More about CSS3 transitions
I can mainly propose two reasons why CSS3 transitions are really useful:
- Hardware acceleration: CSS3 Transitions are directly handled on the GPU (where available) and produce smoother results. And it is really important on mobile devices where computing power is really limited
Support and fallback
Since PP3, IE10 (which you can download with Windows “8” Developer Preview here) supports CSS3 Transitions:
This report was produced by http://caniuse.com/#search=CSS3 transitions.
Of course, as the specification is not finished (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o-.
It is important to support a fallback method if you rely on transitions for websites functionalities. If you don’t want to do that, you should consider using transitions only for design enhancements. In this case, the site will still work but only supported browsers will deliver the full experience. We speak here of “progressive enhancements” as the more powerfull the browser is, the more features he gets.
So to be able to support a fallback to CSS3 Transitions, we will develop a small toolkit to provide transitions by code.
First of all, we will create a container object for our namespace:
To support the same level of easing functions, we must declare an “enum” with all required fields.
The toolkit is based on a function which is called every 17ms (to achieve animations at 60 fps). The function will enumerate through a collection of active transitions. For each transition the code will evaluate the next value given the current value and the target value.
We will need some handy functions to extract value of properties and units used:
The main function will process active transitions and will call the cubic bezier function to evaluate current values:
The current version of the toolkit only supports numeric values but if you want to animate complex values (such as color) you just have to decompose them to simple values.
Registering a transition in the system will be done using the following code:
The “tick” function is launched when the first transition is activated.
Finally you just have to use modernizr to define if CSS3 Transitions is supported by the current browser. If not, you can fallback to our toolkit.
The code for the TransitionsHelper can be downloaded here: http://www.catuhe.com/msdn/transitions/transitionshelper.js
For example, in my puzzle game, the following code is used to animate the cells:
We can note that I could use another way to animate my cells when CSS3 transitions are supported: I could have defined a collection of CSS3 classes with predefined left and top values (one for each cell) to affect them to right cells.
Some frameworks and toolkits already exist to support software transitions:
- jQuery.transition.js: http://louisremi.github.com/jquery.transition.js/test/index.html
- jQUery-Animate-Enhanced: https://github.com/benbarnett/jQuery-Animate-Enhanced
By the way, you can also use the old good animate() method of jQuery.
As we saw, CSS3 Transitions is a really easy way to add animations to your project. You can produce a more reactive application just by using some transitions when you want to change values.
- Blog about CSS3 Animations by David Rousset: http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx
- CSS3 Transitions specifications: http://www.w3.org/TR/css3-transitions/
- IE Test Drive on CSS3 transitions: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transitions.htm
- Others useful posts: