Best way to load and play an image sequence as an animation in html5?

Question

I just want to hear if anyone has any suggestions on which approach to take when it comes to playing a short animation consisting of an image sequence in hmtl5. The wider the browser support the better, and it needs to work for iOS. Canvas can be assumed.

Requirements:

1. Be able to start the animation without user interaction
2. Have precise control of which frame to show (eg go to a specific frame, or start from the first frame and play up to the n:th frame)
3. Be able to scale the animation (to fit the browser window)
4. Be able to play at least 3 seconds at ~30fps (90 frames)
5. Support resolution of at least 1280x720

From a file size/performance point of view having the animation encoded as a video file would be best, but it doesn't fulfill 1) on iOS, and most likely fails to fulfill 2).

The solution I have used in the past is to load the frames individually as a series of jpegs and show the frames either using image elements in the DOM or drawing the frames to a canvas. This fulfills pretty much all requirements, and it works reasonably well except that it's really slow to load. And I have only used this method for animations of about 20-30 frames. You end up with a lot of http requests and quite a lot of data.

For some animations, frames containing lots of motion blur have been saved in a lower resolution which are then stretched when displayed to match the full resolution frames. This saves some file size and isn't really that noticeable.

One way to reduce the amount of http requests would be to combine several images into a sprite sheet, but when the individual frames are 1280x720 you quickly end up with a sprite sheet image with a very high resolution, which I don't think will play nice with iOS.

Are there any other approaches that I'm missing here?

Answer 1

You can use CSS3 keyframe animations and control the animation at any point.

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}


#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
}

You also need to add vendor prefixes but I would just use modernizr for fallback support.

http://www.impressivewebs.com/demo-files/css3-animated-scene/