Animations

CSS Transitions

CSS transition can be tracked with JavaScript using the transitionstart [MDN], transitionrun [MDN], transitionend [MDN], transitioncancel [MDN] events.

CSS Animations

Web Animations API

• developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
• developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
• drafts.csswg.org/web-animations

View Transitions

A page transition occurs when a user navigates from a page to another, usually by clicking a link. Such a transition can be animated. Similarly, a view transition occurs, when a view changes without an actual page change. An example of such a view transition could be an image gallery where clicking a thumbnail displays a bigger version of the image as an overlay.

View Transitions API

The View Transitions API add page transitions into the Web API [spec, WICG/view-transitions, WICG/view-transitions]. There are many articles with example usages of the View Transition API [chrome-dev, smashingmagazine.com, 12daysofweb.dev]. Browser support is currently limited [caniuse].

The API was called Shared Element Transitions API in earlier revisions of the spec [w3c/csswg-drafts#7788, w3c/csswg-drafts@ad4295].

Custom Solutions

Page transition animations can be done without the View Transitions API [css-tricks.com]. There are libraries available to achieve custom page or view transitions [barbajs/barba, swup/swup, topics/shared-element-transition].