# Fonds dégradés animés en CSS, dans les règles de l’art [Canonical HTML page](https://gradiently.design/fr/guide/css-animated-gradient) On ne peut pas animer directement un dégradé, mais tout ce qui l’entoure, si. Quatre techniques, ce que chacune coûte au navigateur, et comment garder un mouvement calme et facultatif. ## The short version - Les navigateurs ne savent pas interpoler entre deux valeurs de dégradé : un dégradé animé en CSS déplace, fond ou transforme donc le dégradé au lieu de l’animer directement. - La technique classique agrandit l’arrière-plan au-delà de l’élément et anime background-position : cela marche partout mais redessine à chaque image. - Enregistrer des propriétés personnalisées avec @property permet au navigateur d’animer des couleurs, des angles et des positions individuels à l’intérieur d’un dégradé. - Animer transform ou opacity sur un calque de dégradé séparé est en général l’option la moins coûteuse, car les navigateurs peuvent souvent le composer sans redessiner. - Toute animation de dégradé devrait s’arrêter, ou presque, quand l’utilisateur a demandé un mouvement réduit. Un **dégradé animé en CSS** est un arrière-plan dégradé qui change de couleur ou de position au fil du temps. Il y a un piège : si vous écrivez deux dégradés différents dans une règle `@keyframes`, les navigateurs ne les mélangent pas, ils sautent. Toute technique qui marche anime donc autre chose à côté du dégradé : sa position, les propriétés personnalisées qu’il contient ou le calque sur lequel il est peint. Ce choix décide de la fluidité du rendu et du travail que le navigateur fait à chaque image. - Image 1 : crépuscule: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)` - Image 2 : plus tard: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)` - Image 3 : braise: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)` Trois instants d’une même animation lente. La direction et la couleur bougent, mais la palette reste d’une seule famille. Côté design, pour savoir quand le mouvement aide une marque et comment le rythmer, voyez les [arrière-plans dégradés animés](https://gradiently.design/fr/guide/animated-gradient-background). Ce guide, c’est le code. ## Technique 1 : déplacer un arrière-plan surdimensionné Donnez au dégradé deux à quatre fois la taille de l’élément avec `background-size`, puis animez `background-position` pour qu’une autre partie apparaisse avec le temps. Cela marche dans tous les navigateurs et n’exige aucun JavaScript. Utilisez `alternate` pour que le mouvement s’inverse en douceur au lieu de sauter au début. ```css .hero { background-color: #1e1b4b; background-image: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6, #fb923c); background-size: 300% 300%; animation: pan 18s ease-in-out infinite alternate; } @keyframes pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } ``` Le dégradé animé classique. Des durées lentes de 12 à 30 secondes paraissent ambiantes plutôt qu’agitées. Le coût : `background-position` n’est pas quelque chose que les navigateurs peuvent déplacer avec la seule carte graphique : l’élément est donc redessiné à chaque image. Sur un bouton, ce n’est rien. Sur un hero plein écran, c’est un vrai travail qui tourne tant que la page est ouverte. ## Technique 2 : animer les arrêts de couleur avec @property Les propriétés personnalisées sont normalement des chaînes, qu’on ne peut pas interpoler. En enregistrer une avec `@property` lui donne un type, comme ``, `` ou ``, et les propriétés typées s’animent en douceur. Utilisez-les dans le dégradé et vous pouvez animer directement les couleurs, l’angle ou la position d’un arrêt. `@property` est pris en charge par tous les grands navigateurs actuels ; consultez [caniuse](https://caniuse.com/mdn-css_at-rules_property) si vous gérez des navigateurs plus anciens. ```css @property --from { syntax: ""; inherits: false; initial-value: #7c3aed; } @property --to { syntax: ""; inherits: false; initial-value: #f472b6; } @property --angle { syntax: ""; inherits: false; initial-value: 120deg; } .hero { background: linear-gradient(var(--angle), var(--from), var(--to)); animation: shift 16s ease-in-out infinite alternate; } @keyframes shift { to { --from: #0891b2; --to: #fb923c; --angle: 200deg; } } ``` Couleurs et angle animés à l’intérieur du dégradé. Des propriétés non enregistrées sauteraient au lieu de se mélanger. - Début : violet vers rose: `linear-gradient(120deg, #7c3aed, #f472b6)` - Fin : cyan vers orange: `linear-gradient(200deg, #0891b2, #fb923c)` Les deux extrémités de l’animation ci-dessus. Le navigateur mélange chaque image intermédiaire. Cette technique redessine aussi à chaque image, comme la première. Son avantage est le contrôle : vous pouvez déplacer une lueur dans un [dégradé maillé](https://gradiently.design/fr/guide/css-mesh-gradient), faire tourner une [bordure conique](https://gradiently.design/fr/guide/css-gradient-border) ou décaler un dégradé de marque vers une seconde palette sans arrière-plans surdimensionnés. ## Technique 3 : transformer un calque de dégradé Placez le dégradé sur un pseudo-élément bien plus grand que l’élément, et animez sa `transform`, par exemple une lente rotation ou une dérive. Les navigateurs peuvent généralement déplacer un calque transformé sur la carte graphique sans le redessiner : c’est la façon la moins coûteuse d’animer un grand dégradé. `will-change: transform` indique que le calque doit être promu à l’avance. ```css .hero { position: relative; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #0891b2, #1e1b4b); animation: turn 40s linear infinite; will-change: transform; } @keyframes turn { to { transform: rotate(1turn); } } ``` Un immense dégradé conique qui tourne lentement derrière le contenu. L’inset négatif garde les coins couverts pendant la rotation. ## Technique 4 : fondu enchaîné entre deux dégradés Superposez deux calques de dégradé et animez l’`opacity` de celui du dessus. L’opacité est aussi une propriété adaptée au compositeur : le fondu est fluide et peu coûteux. Il convient aux changements lents d’ambiance, comme une palette de jour qui se fond dans une palette de nuit, et il permet aux deux dégradés d’avoir des structures totalement différentes. ```css .sky { position: relative; isolation: isolate; background: linear-gradient(180deg, #7dd3fc, #fde68a); } .sky::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0f172a, #7c3aed); animation: dusk 20s ease-in-out infinite alternate; } @keyframes dusk { from { opacity: 0; } to { opacity: 1; } } ``` Le jour se fond dans la nuit et inversement. Seule l’opacité change : rien n’est redessiné. ## Choisir une technique | Technique | Travail du navigateur par image | Idéal pour | | --- | --- | --- | | Déplacer `background-position` | Redessin | Petits éléments, boutons, texte | | Couleurs et angles `@property` | Redessin | Changements de couleur précis, bordures tournantes | | `transform` sur un calque | En général composition seule | Grands arrière-plans plein écran | | Fondu `opacity` | En général composition seule | Changements lents d’ambiance ou de palette | Les redessins ne posent pas de problème sur de petites zones. Pour de grandes zones, préférez transform et opacity. Mesurez plutôt que deviner. Dans les DevTools de Chrome, le panneau Rendering met en évidence par un clignotement les zones redessinées à chaque image, et un enregistrement Performance montre la part de chaque image consacrée au dessin. La [performance des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance) le détaille. ## Mouvement réduit et bonnes manières Certaines personnes ont des vertiges ou se laissent distraire par un mouvement d’arrière-plan, et les systèmes d’exploitation leur permettent d’en demander moins. Respectez cela avec une requête `prefers-reduced-motion` qui arrête l’animation en laissant une image fixe et complète. Le guide du [mouvement réduit](https://gradiently.design/fr/guide/reduced-motion) explique quel mouvement mérite d’être supprimé. ```css @media (prefers-reduced-motion: reduce) { .hero, .hero::before, .sky::after { animation: none; } } ``` Une règle qui arrête toutes les techniques ci-dessus. Vérifiez que l’image laissée derrière vous a encore fière allure. ### À éviter - Des cycles de moins de 8 secondes environ sur de grandes zones - Une rotation de teinte arc-en-ciel sur toute la page - Du mouvement derrière du texte que l’on doit lire - Des animations qui continuent quand l’onglet est inactif pendant des minutes ### À faire - Un mouvement lent et ambiant dans une seule famille de couleurs - Du mouvement dans le hero, de l’immobilité dans le contenu - Une image fixe calme pour le mouvement réduit - Tester sur un ordinateur portable modeste et un téléphone, pas seulement un bureau rapide ## FAQ ### Peut-on animer un dégradé CSS ? Pas directement : les navigateurs sautent entre deux valeurs de dégradé dans des keyframes. Animez plutôt `background-position`, des propriétés personnalisées enregistrées utilisées dans le dégradé, ou le transform et l’opacity d’un calque de dégradé. ### Quelle est la façon la plus fluide d’animer un fond dégradé ? Animer `transform` ou `opacity` sur un calque de dégradé séparé, car les navigateurs peuvent en général les gérer sans redessiner. ### Comment animer les couleurs d’un dégradé en CSS ? Enregistrez chaque couleur avec `@property` en utilisant `syntax: ""`, utilisez les propriétés dans le dégradé et changez-les dans `@keyframes`. ### Les dégradés animés ralentissent-ils une page ? Les petits comptent rarement. Les grands arrière-plans animés qui se redessinent à chaque image peuvent coûter de la batterie et de la fluidité : préférez transform ou opacity et mesurez avec les DevTools. ### Comment respecter le mouvement réduit pour les animations de dégradé ? Placez une règle `animation: none` dans `@media (prefers-reduced-motion: reduce)` pour que les utilisateurs qui demandent moins de mouvement voient une image fixe.