Animations sans JS : CSS sait déjà tout faire

Jusqu'à récemment, « l'apparition lors du défilement » ou « la transition entre les écrans » signifiait des gestionnaires d'événements et un tas de code JS. Aujourd'hui, les moteurs de recherche prennent le rendu sur eux-mêmes, et nous décrivons l'intention en CSS. Avantages : moins de dépendances, fluidité au niveau du compositeur, limitations de performances plus claires.

🚀 Scroll-linked animations: @scroll-timeline

Nous associons la progression de l'animation au défilement. Le navigateur lui-même donne la « chronologie » — il reste à y attacher des images clés.

@scroll-timeline fade-tl {
  source: auto;               /* ближайший скроллируемый контейнер */
  orientation: block;         /* по оси прокрутки */
  scroll-offsets: 0%, 100%;   /* начало/конец */
}

.section__item{
  animation: fade-in 1s both linear;
  animation-timeline: fade-tl;        /* ← магия */
  animation-range: entry 0% cover 60%;/* когда и как играться */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Où l'utiliser : apparition des cartes, parallaxe, barre de progression de lecture, titres de sections fixes.

🔁 View Transitions API : « dégradés » entre les états

Transitions natives entre les pages/états sans synchronisation manuelle. JS lance la transaction, CSS la met en forme.

/* CSS */
::view-transition-old(root),
::view-transition-new(root){
  animation: fade .35s ease;
}

@keyframes fade {
  from { opacity: .001 }
  to   { opacity: 1 }
}

/* JS (одна строка в обработчике) */
// document.startViewTransition(() => router.navigate('/about'));

Astuce : vous pouvez nommer les éléments via view-transition-name et faire un « vol » de blocs spécifiques (image de héros, titre).

📦 Requêtes de conteneur + animations

Les composants répondent à la largeur/hauteur du parent, pas à l'ensemble de la fenêtre. Vous pouvez facilement « réassembler » la carte lorsque vous changez de zone.

.card{
  container-type: inline-size; /* объявили контейнер */
}

@container (min-width: 520px){
  .card__media{ inline-size: 280px }
  .card__body{ animation: grow .4s ease }
}

@keyframes grow{
  from{ transform: scale(.96) }
  to  { transform: scale(1) }
}

🧲 Sélecteur d'état :has() sans JS

La réaction du parent à l'état/présence d'éléments enfants est un déclencheur pour l'animation.

.accordion:has(input:checked) .accordion__panel{
  grid-template-rows: 1fr;          /* раскрываем */
  transition: grid-template-rows .3s ease;
}
.accordion:not(:has(input:checked)) .accordion__panel{
  grid-template-rows: 0fr;          /* скрываем */
}
.card:has(:hover){ transform: rotate(1.5deg) scale(1.03); transition:.25s }

🧩 Propriétés de transformation individuelles et composition d'animations

Au lieu de la « grande » transform, les fonctions indépendantes translate, scale, rotate sont disponibles. Et la propriété animation-composition vous permet d'ajouter des effets.

.chip{
  translate: 0 8px;        /* читаемее и безопаснее */
  rotate: 1deg;
  transition: translate .25s ease, rotate .25s ease;
}
.chip:hover{ translate: 0 0; rotate: 0deg }

.pulse{ animation: pulse 1.2s infinite ease; }
.float{ animation: float 3s infinite ease alternate; }
.pulse, .float{ animation-composition: add; } /* суммируем эффекты */

@keyframes pulse{ from{scale:1} 50%{scale:1.04} to{scale:1} }
@keyframes float{ from{translate:0 0} to{translate:0 -8px} }

📊 Avant/Après

CSS a atteint un niveau où la plupart des animations d'interface sont créées de manière déclarative et fonctionnent plus rapidement. Utilisez @scroll-timeline, View Transitions, :has(), Container Queries et les propriétés transform individuelles, et laissez JS là où la logique est nécessaire, pas le rendu.

📚 Vous voulez approfondir le sujet ?

Dans l'application Code vous trouverez des leçons détaillées sur différents sujets, des exercices pas à pas, des analyses d'erreurs et des exercices pratiques directement sur votre téléphone ou votre navigateur.

Et si vous voulez être au courant des nouveautés, des nouvelles fonctionnalités et des contenus utiles, abonnez-vous à notre Chaîne Telegram. C'est confortable, professionnel et avec amour pour le code ❤️

💬 Quels effets avez-vous déjà transportés de JS vers CSS et qu'est-ce qui a donné le plus de retour ?