L’article de CSS-Tricks présente sept exemples concrets de view transitions, une fonctionnalité CSS moderne permettant d’animer les changements de vue entre pages ou éléments. L’auteur explique d’abord le principe de base, notamment l’activation via la règle @view-transition et l’utilisation de types d’animations personnalisés, tout en respectant les préférences de réduction de mouvement des utilisateurs. Il détaille ensuite la structure technique pour appliquer des animations entrantes et sortantes via des pseudo-éléments comme ::view-transition-old(root) et ::view-transition-new(root).
L’article propose des recettes prêtes à l’emploi, comme l’effet pixelate dissolve qui combine flou et fondu pour une transition visuelle originale. Chaque exemple inclut le code nécessaire et des explications sur leur implémentation, avec une attention particulière portée à la compatibilité navigateur (tous les principaux navigateurs supportent désormais les view transitions, bien que certaines animations puissent varier). L’auteur encourage à expérimenter ces techniques pour enrichir l’expérience utilisateur tout en restant accessible aux débutants.
Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.
L'auteur présente des démos des possibilités de l'API View Transition : elle permet d'améliorer graphiquement le passage d'une page à l'autre en rendant la transition moins abrupte. Il s'agit d'un argument en moins pour la création d'une Single Page Application.
L'article soutient que les fonctionnalités modernes du CSS, telles que l'API View Transitions et les Speculation Rules, ont éliminé les principaux avantages des Single Page Applications (SPAs). Ces innovations permettent des transitions fluides entre les pages, une navigation instantanée et de meilleures performances sans la complexité et la surcharge de JavaScript associées aux SPAs. Alderson argue que les navigateurs modernes peuvent désormais gérer des expériences riches et fluides de manière native, rendant obsolètes les SPAs pour la plupart des sites web. Il encourage les développeurs à utiliser le rendu côté serveur, des pages réelles, des animations CSS et à réduire l'usage de JavaScript pour construire des sites web plus performants et maintenables.
Il s'agit d'une façon plus fine d'utiliser les Cross-Document View Transitions, qui permettent de faire des effets de transition quand on passe d'une page à une autre via un clic.
Suite de https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/ l'auteur explique et démontre des utilisations de la View Transitions API pour faire des effets de transitions, notamment lors de changement de pages (avec un tuto pour React).
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
L'auteur montre cette nouvelle API pour faire des transitions entre pages.