Adding Personality with CSS3 Transitions and Animations


Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and 10 allow Web developers to create richer and richer experiences. Two related features, CSS3 Transitions and CSS3 Animations, give Web developers a declarative way to add personality to Web page interactions easily.

This blog post describes these two features as implemented in IE10 in the Windows Developer Preview and Windows 8 Metro style apps written in HTML.

Same Markup—Except for the Vendor Prefix

Like nearly all features new to IE9 and IE10, CSS3 Transitions and Animations are standards-based features implemented with “same markup” interoperability in mind. However, unlike features such as border-radius, box-shadow, and text-shadow, which are part of stable W3C specifications, Transitions and Animations are still at a specification stage where vendors prefix their implementations. Therefore, in this case, “same markup” must be qualified as “same markup except for the vendor prefix.”

Many other writers have written about these features, including Rich Bradshaw’s excellent article Using CSS3 Transitions, Transforms and Animation. Many articles that discuss these features use only the -webkit- prefix in their examples. Users wishing to experiment in other browsers need to copy the example and change -webkit- to -ms-, -moz-, or -o-, as appropriate. Bradshaw’s examples are an exception; they already work in IE10!

Transitions

The function of CSS3 Transitions is very straightforward: smoothly change the computed value of a CSS property from its old value to its new value. Moreover, changes in value resulting from changes in an element’s CSS class or pseudo-class also trigger transitions.

Consider the following markup:

img {

opacity: 1;

transition-property: opacity;

transition-duration: 2s;

transition-delay: 0s;

transition-timing-function: linear;

}

img:hover {

opacity: 0;

}

The effect of this is that when the user moves his or her mouse over the image, the image will fade out smoothly over 2 seconds starting immediately, as illustrated below (I’ve added a dropped shadow on a wrapping element to illustrate the endpoint).

Fading one image to nothing over 2 seconds
Fading one image to nothing over 2 seconds

The transition properties that cause this to occur are:

  • transition-property – specifies which CSS properties are to be transitioned. The keyword “all” causes all animatable properties to transition when changed. The default value is “all.”
  • transition-duration – the time, in seconds or milliseconds, of the transition, starting after the transition-delay. The default value is zero, meaning that the transition is immediate.
  • transition-delay – the time, in seconds or milliseconds, after the value is changed before the transition starts. The time may be negative, in which case the transition starts part way through its duration. The default value is zero.
  • transition-timing-function – describes how the intermediate values of a transition are calculated. This allows a transition to change speed over its duration. The underlying function is a cubic Bézier curve; keywords match common functions. The default value is the keyword “ease,” a function that starts fast and slows down toward the end.

Fading one image to nothing is a simple example. Let’s say we wanted to fade one image to another, as illustrated below.

Fading from one image to another over 2 seconds
Fading from one image to another over 2 seconds

The following markup accomplishes this (except that vendor prefixes must precede all the transition properties).

HTML Fragment

<div id=”imageWrapper”>

<img id=”backImage” src=”imageB.jpg” /><img id=”frontImage” src=”imageA.jpg” />

</div>

CSS Fragment

#imageWrapper {

display: inline-block;

width: 400px;

height: 267px;

box-shadow: 2px 2px 5px 0px gray;

position: relative;

}

#imageWrapper img {

width: 400px;

height: 267px;

position: absolute;

transition-property: opacity;

transition-duration: 2s;

transition-timing-function: linear;

}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {

opacity: 1;

}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {

opacity: 0;

}

Here’s a working version of the markup above:

Ending image of fade one image to another exampleStarting image of fade one image to another example
Move your mouse over the image to fade it to another.

Simple transitions, such as the one above, are moderately easy to simulate in JavaScript. The benefits of CSS Transitions are their declarative definitions, making them easier than script, and they run—at least in IE10—asynchronously to the main processing thread resulting in smoother transitions and sites that are more responsive.

An interactive demo of CSS3 Transitions is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Transitions, including IE10 in the Windows Developer Preview.

Animations

CSS3 Animations are similar to CSS3 Transitions in that they smoothly animate a CSS value over time. The differences are (a) how one specifies the properties to animation, (b) how one triggers the animation and (c) the complexity of the animation possible.

You define animations using a CSS “keyframes” at-rule. A simple keyframes rule that matches the fade out behavior of the transition above would be:

@keyframes fadeOut {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

We apply this to our image with this CSS:

img {

animation-duration: 2s;

animation-delay: 0s;

animation-timing-function: linear;

animation-fill-mode: forwards;

}

img:hover {

animation-name: fadeOut;

}

Many of these properties are familiar from our discussion of transitions. The new ones are:

  • animation-fill-mode – the “forwards” value of this property means to maintain the “to” property values from the end of the animation going forward in time. The default value of this property is “none,” which causes the properties to return to their non-animated values at the end of the animation. (It’s possible to construct the CSS above without using animation-fill-mode. Simply add “opacity: 0;” to the img:hover rule to maintain the ending opacity at 0.)
  • animation-name – setting the animation-name property triggers the animation. When the animation-name property is set, the animation-delay time starts counting down. When animation-delay reaches zero, the animation begins and continues for the animation-duration. The animation-timing-function behaves the same as the transition-timing-function described above.

The power of CSS3 Animations lies in the ability to specify multiple keyframes with properties and intermediate values that don’t have to stay within the bounds of the start and end values. In CSS3 Transitions, intermediate values always progress from the start to the end; they will never go outside that range. Animations do not have that restriction.

This makes it possible to program a “bounce” such as shown in the markup and example below.

#bouncingImage {

width: 400px;

height: 267px;

box-shadow: 2px 2px 5px 0px gray;

animation-duration: 2s;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

#bouncingImage:hover {

animation-name: zoomInBounce;

}

 

@keyframes zoomInBounce {

from {

transform: scale(1);

}

30% {

transform: scale(1.4);

}

40% {

transform: scale(1.15);

}

50% {

transform: scale(1.35);

}

60% {

transform: scale(1.2);

}

70% {

transform: scale(1.3);

}

80% {

transform: scale(1.225);

}

90% {

transform: scale(1.275);

}

to {

transform: scale(1.25);

}

}

Image used in the zoom in with bounce example
Move your mouse over the image to zoom it with a bounce effect.

An interactive demo of CSS3 Animations is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Animations, including IE10 in the Windows Developer Preview.

Building Your Site’s Personality

The two examples shared in this post are unlikely to be things you adopt on your site. Yet, well-designed transitions and animations are becoming an expected part of a modern Web experience. Windows 8 Metro style uses fluid and subtle animations extensively to help users better understand their interactions with the system. These literally make Windows 8 Metro style apps feel more responsive to touch.

We hope the examples here, the IE Test Drive demos, and the growing number of articles and examples elsewhere on the Web help you explore this new technology and add personality to your Web site.

—Ted Johnson, Lead Program Manager for Graphics, Internet Explorer

Comments (15)

  1. Arieta says:

    Yes, we know about CSS3 animations, since we have been using them already for a while… Now, when can we get a new platform preview or a Beta version for IE10 on Windows 7?

  2. Eduardo Valencia says:

    Cmon Microsoft

    The best feature you can implement are much much shorter development cycles.

    Talking about features,IE10 should handle cookies better and protect them from programs like CCleaner?

  3. wolfman says:

    decent debugging tools for IE10, please! the web development tools in IE8/9 are extremely slow and are no match to competitor browsers.

  4. Klimax says:

    @Eduardo Valencia: There is difference between implement it fast and fix bugs later and  implement it right. Team is going after stable platform not after fast moving platform. (And I like that)

  5. Jonathan says:

    This is great! Will there be backwards/fallback compatibility for IE6 ??

  6. Olivier says:

    @Eduardo Valencia : we want stables browsers ! Not something with tons of new features all the time and full of never corrected bugs.

    And what's wrong with CCleaner? It's one of its jobs to remove cookies, why IE should protect them?

    @Jonathan : You'll probably have to code yourself a fallback solution.

    I'm using IE8, the first example works on this browser and there is a note : "CSS3 Transitions are not supported by your browser. The transition above is simulated in JavaScript."

  7. Michael says:

    Is the transitionend event supported/planned?

    Both 'transitionend' and 'msTransitionEnd' seem to not be working in the windows 8 developer preview.

  8. @Michael: Oddly, it's MSTransitionEnd. Same for animations: MSAnimationEnd.

  9. Rich Bradshaw says:

    Saw this article come up in my feed reader and was pleasantly surprised to see a link to my tutorial! Thanks a lot! At some point I'm going to make something similar for the new things in CSS4 – it's always nice to have live code up to see how it all works.

    Can't wait til IE10 is out, and we are able to develop sites using these technologies knowing that they are accessible to all users.

  10. Riasat says:

    I'm on IE10/win dev. And I get "your browser does not support css3 transitions blah blah" cause this page is defaulting to IE9 document mode! Can you please fix this?

  11. ieblog says:

    @Riasat: You are quite correct. The blogs.msdn.com host forces 9 document mode using a meta tag. We are working with them to change this. In the meantime, IE10 users can see the proper behavior of these two examples by using the F12 developer tools and forcing the page into Standards mode.

  12. Daniel Piechnick says:

    CSS3 is useful for visual effects like these. It's bit harder to use the other CSS3 elements, due to browser incompatibility.

    Daniel Piechnick

  13. JuniorWebDeveloper says:

    Very good article. Thanks for your effort! It've been a very good introduction for me.

  14. Michael says:

    So… Silverlight? is it officially dead?

  15. Bronislav Klucka says:

    Hi, could someone from MS answer Arieta question? I was asking the same at connect.microsoft.com/…/Feedback also ignored… Nobody expecting exact date, if you do not know. But what are we looking for here? December 2011? April 2010?

Skip to main content