Animating content and entrance transitions (HTML)
Use content transition animations to change the content of an area of the screen, while the container or background doesn't change. New content that comes onto the screen slides in from an offset as it fades in. If there is existing content to be replaced, the old content is faded out as the new content comes in. You might use this in the case of split-screen navigation, where the user is shown a list and a detailed view. Content transition animations also bring content into view that loads after the rest of a page, when the app transitions between pages.
This set of animations consists of the following functions:
The following video demonstrates these animations, removing existing content and then bringing new content into view:
Note that the original content and the replacement content don't need to have the same layout or size.
To use the content transition APIs, you'll need to know:
- The outgoing objects
- The incoming objects
- The distance and direction that incoming content will slide as it enters.
Other resources
For code examples that demonstrate the use of the content transition animation functions, see the HTML animation library sample.
For design best practices in the use of these animations, see Guidelines and checklist for content transition animations.