Andy Clarke explore dans cet article comment les animations ambiantes, discrètes et lentes, peuvent enrichir l’identité visuelle et la narration d’un site web sans distraire l’utilisateur. À travers trois études de cas (Reuven Herman, Mike Worth et EPD), il illustre des techniques concrètes : morphing de chemins SVG, superposition de mouvements pour créer de la profondeur, interactions subtiles et respect des préférences d’accessibilité (comme prefers-reduced-motion). Ces animations, réalisées avec CSS ou GSAP, transforment des éléments statiques en expériences vivantes, tout en restant en arrière-plan. L’article met l’accent sur l’optimisation des SVGs, la performance et l’intégration harmonieuse du mouvement dans le design, prouvant que même dans des secteurs traditionnels, l’animation peut renforcer une marque sans dominer le contenu.
Une analyse des publicités pour les trains, suivie d'une description des outils employés pour cette analyse : IA, animation, etc.
Les nouveautés de CSS4 en la matière
Tout est dans le titre
Tout est dans le titre
Comment animer les drapeaux LGBTQ+ en CSS ( avec un peu de JavaScript pour les paramètres)
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Ça promet : une fonctionnalité CSS (supportée uniquement par Chrome et ses dérivés pour le moment) qui permet, entre autres, de spécifier un type de propriétés CSS personnalisé. Il est possible ensuite de donner au navigateur toutes les infos nécessaires pour animer ces propriétés. Les démos sont très sympathiques
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Une propriété méconnue de la spec Web Animation dont l'utilisation peut provoquer certaines surprises :)
Une comparaison... la conclusion de l'auteur est intéressante : il ne faut pas voir les animations CSS vs Web comme concurrentes mais comme complémentaires