iPhone CSS Animations Thoughts and Issues

I’ve been doing a lot of work with the iPhone lately and I’ve been holding back on blogging about my experiences because I’m unclear as to the damn NDA stipulations. NDA be damn, here’s a first in a series of posts!

If you aren’t familiar with the new animation framework that’s built into Mobile Safari you can read about the closest thing on WebKit, CSS transitions. Here is an example of a CSS transition:

<div style="-webkit-transition: opacity 2s ease-in"
  onclick="this.style.opacity='0'">
This div will do a fade when clicked only Safari 3.1 or on the iPhone!
</div>
This div will do a fade when clicked Safari 3.1 or on the iPhone

Essentially you tie a timing function and duration when a css property is changed. CSS animations allow for more complex rule transitions. For example, if you want to have a card flipping effect show in this video, you will need to use CSS animations.


CSS animations consist of a combination of 2 rules, one to define the animation timing, duration, and animation name. The second to define the actual animation.

/* the following rules make something shrink from 50px */
/* to 10px then grow to 100px in 2 seconds */ 
.shrink-n-grow {
  -webkit-animation-name: 'shrink-n-grow-animation';
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 2s;
}

@-webkit-keyframes shrink-n-grow-animation {
  from {
    height: 50px;
  }
  50% {
    height: 10px;
  }
  to {
    height: 100px;
  }
}

There are a few issues with the Mobile Safari CSS animation implementation and I urge Mozilla, the IE team, Opera, and W3C to consider these before writing their own spec.

CSS means no syntax checking

Jonathan Snook wrote about this last year and until I actually started using them I didn’t feel the pain. Since all the rules are written in CSS there is no error checking. Figuring out that you’re animation is broken because you misspelled -webkit-transition: is painful enough. When you start working with perspectives for translateZ, it will drive you utterly insane.

Access through javascript problematic

Also, because the rules live in CSS world, modifying existing rules on the fly in javascript requires you to use this ridiculous function to scan through CSS rules and find the one you want and then modifying a value.

  var findAnimation = function(name) {
      var ret_rule = null, sheets = document.styleSheets;
      for(var i = sheets.length - 1; i >= 0 ; i--) {
        var sheet = sheets[i];
          for(var j = sheet.cssRules.length - 1; j >= 0; j--) {
            var rule = sheet.cssRules[j];
              // 7 means the keyframe rule
              if(rule.type === 7 && rule.name == name) {
                ret_rule = rule;
                break;
              }
            }
      }
      return ret_rule;
    }
  findAnimation('shrink-n-grow-animation').findRule(
     '50%').style.height = '25px'

Needlessly complicated

To use an animation, not only do you have to apply the final value of the animation if you want it to stick, but you have to perform some software olympics.

  // Add shrink-n-grow animation to a div
  var remove = function() { // we'll need this later
    // first, set final values
    theDiv.style.height = '100px';
    // then remove shrink-n-grow classname so that 
    // it can be applied again animations are only
    // triggered when classnames are first applied
    theDiv.className = ''; 
    // remove this listener because webkitAnimationEnd
    // is triggered on every time ANY animation ends on theDiv
    theDiv.removeEventListener('webkitAnimationEnd', remove);
  };
  // listen for animation end
  theDiv.addEventListener('webkitAnimationEnd', remove);
  /// FINALLY, start the animation animation
  theDiv.className = 'shrink-n-grow'; 

That is just way too much code.

My personal preference is to have everything accessible in javascript so that the entire workflow of animation can live in javascript (instead of just modifying styles).

4 responses to “iPhone CSS Animations Thoughts and Issues”

  1. […] Desde Wayne Pan descubro una función JS con la que encontrar una animación fácilmente. […]

  2. […] and 2/3 the demos worked. The spinning div does not work. Animations ala iPhone, which I covered here, are not supported however. That’s to be understood since those were more Mobile Safari […]

  3. andrew says:

    Ive found that if i use javascript interval based animation with the transform property I have no problems, even when I use functions to parse the transform property and augment it with a new variable. This even works on the iphone smoothly so long as you do not trigger any dom manipulation other than transform or opacity (the performance enhanced properties).

  4. […] taskrunner/setTimeout style. Even PastryKit doesn’t use WebKitAnimations since the API is fubar’d! As far as I can tell nothing in the framework or iPhone User Guide uses […]