Back to overview

HTML5 Showcase

The demos below show how your browser supports the capabilities of web standards such as HTML5, CSS3, and JavaScript.

Transitions

This demo requires a browser that supports CSS 3D transforms.

To view this demo, you’ll need Safari 5 on Mac OS X or Windows, Safari on iOS, or the latest WebKit Nightly Build.

2D Transitions:

3D Transitions:

Not yet supported by your browser.

Try it out: Click any of the transitions above to see them in action.

About this demo: Add Keynote-style transitions to objects on your web pages by using CSS 2D and 3D transforms like the ones displayed here.

Close

Download Safari to view 3D transforms.

The 3D transforms in this demo are not yet supported by your browser. If you’d like to experience these transitions, simply download Safari. It’s free for Mac and PC, and it only takes a few minutes.

Safari

For Mac + PC

Download Safari
Close

Enable GPU Accelerated Compositing in Chrome to view 3D transforms.

The 3D transforms in this demo are only supported by your browser if you enable GPU Accelerated Compositing.

If you’d like to experience these transitions:

  • Open a new tab in Chrome with the URL “about:flags”
  • Click on Enable GPU Accelerated Compositing
  • Restart Chrome
Watch it again

Visit the Safari Dev Center to learn more and download sample code