CSS3 for Windows Store Apps: Animations

  • Article

CSS3 has brought much goodness to the web developer community.  The feature that potentially steals the show is CSS3 Animations – which can also be used when developing applications for the Windows Store via JavaScript.

If you are not familiar with animations, the name itself is practically self-explanatory.  Animations can deliver very appealing “eye-candy” in a variety of ways including object movement, resizing, transforming, fading, style changes, and much more.  Because animations have been around awhile, there is plenty of information out there to help you get started, such as the animations topic at the IE 10 Guide for Developers and Hands On: Animations on IE Test Drive.  Our focus here is more on how to use animations in the context of writing apps for the Windows Store.

Animations Simplified

A chronic worry when developing content for the web is how our creative work will render in multiple browsers.  For example, the following CSS rules define an animation for bringing an element in from above the screen:

 @-webkit-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@-moz-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@-o-keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
@keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
#message {
             position: relative;
    -webkit-animation: drop-in 1s forwards;
       -moz-animation: drop-in 1s forwards;
         -o-animation: drop-in 1s forwards;
            animation: drop-in 1s forwards;
}

All of the rules above are reduced to the following when developing apps for the Windows Store:

 @keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
#message {
     position: relative;
    animation: drop-in 1s forwards;
}

Why so much reduction?  When writing Windows Store apps, we are not worried about supporting multiple browsers.  Whatever standards work for IE 10 are all we need.  Granted, if you used the previous rules with all the vendor prefixes while creating an app - no error would occur, they would just be ignored.

Playing Animations

Animations are triggered as soon as they are defined.  In the previous example, as soon as the page with the element with and ID of “message” was navigated to, the animation was triggered.  Animations can be triggered from code as well.  Consider the following example:

 @keyframes drop-in {
    0%   {top: -100px;}
    100% {top: 0px;}
}
.animate-drop-in {
    animation: drop-in 1s forwards;
}
#message {
     position: relative;
}

The rules above introduced a slight change from what we observed previously – the animation was moved to a class named “animate-drop-in”.  Assuming the element with an ID of “message” is not defined with the new class name, the animation will not occur.  However, we can trigger the animation in code as seen here:

 message.onclick = function () {
    message.classList.toggle("animate-drop-in");
}

The click event handler for the “message” element toggles the class name.  Once the app sees the element is assigned to an animation (which is what the new class does), it triggers the animation.  The toggle method of classList returns a boolean value based on whether it added (true) the class name or removed (false) it.

If needed, you can respond to three events related to animations.  Here is the syntax for defining the handlers for each:

 // animation started
message.addEventListener("animationstart", function (arg) { });

// animation iteration completed
// applies only when animation-iteration-count > 1
message.addEventListener("animationiteration", function (arg) { });

// animation ended
message.addEventListener("animationend", function (arg) { });

The above event handlers are handy and can allow a chain of complex animations.  For example, in the event handler for when an animation ends, you can add code to trigger a completely new animation.

Animations vs. Transitions

A close relative to animations is CSS3 Transitions, and those are covered in another post entitled CSS3 for Windows Store Apps: Transitions.  Since both of these technologies offer “animation” as the effect, you might wonder when to use one or the other.  With that in mind, take the following in consideration when trying to decide which is best:

Animations
  • Effect is played as soon as animation is defined, or programmatically
  • Multiple stages are possible, allowing more complex animations
Transitions
  • Effect is triggered when a targeted property value changes, usually due to a state change such as when a :hover is defined.  A targeted property value changed in code will also trigger a transition.
  • Syntax is much simpler, thus, effect is usually simpler than what can be done with animations.

Another point to think about is what the intent of each technology is.  Transitions (as the name implies) are really intended to provide a nice visual effect when something is changing state.  Animations can be used for anything pertaining to the logic of the application.

With Great Power…

Animations offer a great way to enhance the user experience.  However, too much of a good thing can become an annoyance. So be judicious with your implementations of animations.

It is an exciting time to be a developer with web skills.  Harness what you know and use it to great some great applications for the Windows Store.  Be sure to take advantage of all the resources available at Generation App!