Animating page transitions (HTML)
Use page transition animations to display the first page of a newly launched app, or to transition between pages within an app. The new page slides into place from an offset as it fades in. The existing content fades out as the new content fades in. The new page is split into regions, and each region moves onto the screen separately, with staggered timings. You specify how the incoming page is split into regions.
This set of animations consists of the following APIs:
The following video demonstrates the animation that brings a page of content into view:
The following video demonstrates the animation that removes a page of content from view:
To use these animations, you'll need to know:
- The outgoing objects
- The incoming objects.
- The distance and direction that the incoming content will slide as it enters.
- The recommended direction is the opposite of the reading order.
Other resources
See the HTML animation library sample for code examples that demonstrate the use of the page transition animation APIs.
See Guidelines and checklist for page transition animations for design best practices in the use of these animations.