Ajoutez une touche d'animation (ou plusieurs !) à vos sites web.
Je ne connaissais pas la méthode animate() utilisable sur un élément HTML qui permet de créer et déclancher une animation CSS à la volée, en JavaScript, un peu à la manière de ce que permettent les librairies d'animation, mais en natif du coup.
Un cours (payant mais avec preview) sur le format SVG et sur les techniques pour l'animer.
Exploration des propriétés CSS @starting-style et transition-behavior: allow-discrete pour les animations.
Les valeurs discrètes sont les valeurs non-numeriques telles que block, inline, etc.
La propriété CSS interpolate-size est un un peu le nouveau box-sizing: border-box; : elle permet de transitioner depuis ou vers un mot clé (auto par exemple) en plus des grandeurs fixes, chose qui a longtemps été impossible avec du pur CSS.
Il suffit de la déclarer à la racine et elle s'applique partout. Mais elle n'est pas activé par défaut pour éviter les régression sur les anciens sites.
Un outil pour faciliter l'usage des fonction CSS d' "easing" (aucune idée de comment traduire ça).
Très bien conçu et très sympa esthétiquement, avec cette petite touche néon :)
Initiation aux animations de défilement (scroll animation) en CSS.
Introduction aux View Transitions CSS pour animer nativement la transition entre deux états d'une application web.
Un outil qui permet de créer des animations très simplement en utilisant des formes simples. J'ai testé très rapidement, et c'est très bien fait !
Via https://korben.info/trangram-plateforme-creer-animations-graphiques-animes-facilement.html
Un tuto simple qui aborde l'animation d'un SVG simple avec des transitions CSS.
Uploadez un dessin de personnage, ce service utilise l'IA pour l'animer.
Une lib JavaScript pour créer des animations. Son poids est très réduit mais elle semble complète en terme de fonctionnalités. Elle possède en outre des helpers pour Vue et Solid.
Une lib JavaScript qui permet d'animer automatiquement (et avec une seule ligne de code) les changements appliqués à une collection d'éléments (ajout, suppression, tri).
En gros, ça permet de rendre les ajouts ou suppression d'éléments du DOM plus visibles pour vos utilisateurs, sans trop se prendre la tête à gérer l'animation à la main.
Je n'ai pas encore creusé pour voir comment ça fonctionne mais les exemples sont assez convainquant.
Et il existe des directives pour React, Vue et Svelte.
Une autre lib Vue pour effectuer une transition animée d'un composant entre deux pages.
Une lib Vue qui permet de créer des transitions pour un composant entre son affichage dans une page A et son affichage dans une page B. Un peu à la manière de ce que préconise Material Design, pour conserver un maximum de contexte lors d'une navigation.
Un outil pour générer des animations CSS3 via une interface graphique. Il existe aussi une lib JS qui permet de faire la même chose dynamiquement en JS.
100 animations hover en CSS. Histoire de change du classique changement de couleur ou soulignement.
Tout est dans le titre :)
Cet article est très didactique, parfait pour bien comprendre les transitions CSS. Il n'aborde cependant pas les animations CSS à proprement parler.
Une chouette introduction aux animations CSS en utilisant des path SVG.
