Safari Technology Demos

Back to Overview
Photo Slideshow
Best Viewed: Safari on iOS, Mac OS X, Windows

Photo Transitions

You can transition between images — or any web page elements — using CSS3 2D and 3D transforms together with transitions and animations. CSS3 transforms allow you to easily position web page elements in new and interesting ways, while CSS3 transitions and animations let you define the appearance of an animation with just a few lines of code. CSS3 animations can also leverage hardware acceleration, so your effects will be smooth and fluid on iPad and iPhone — especially when compared to animations created with older, conventional JavaScript animation techniques.

In this example:

  • Photos are animated by combining CSS3 2D and 3D transforms with transitions and animations.
  • JavaScript initiates each animation.

Related Resources