Créer une animation background en CSS permet de donner immédiatement un style moderne et dynamique à un site web. Grâce aux dégradés animés et au changement de couleur automatique, vous pouvez transformer une page classique en interface visuellement attractive, sans utiliser JavaScript.
Dans ce tutoriel complet, vous allez apprendre pas à pas comment réaliser un fond animé fluide en CSS, comprendre le fonctionnement des @keyframes et personnaliser facilement votre animation selon vos envies.
- Donnez un aspect moderne et dynamique à vos pages web grâce à une animation de background fluide réalisée uniquement en CSS.
- Comprenez simplement le fonctionnement des dégradés animés, des
@keyframeset des transitions pour créer des effets visuels professionnels. - Personnalisez facilement les couleurs, la vitesse et les mouvements afin d’adapter l’animation à l’ambiance de votre site web.
Avec quelques lignes de CSS, vous pouvez créer une animation background élégante qui change automatiquement de couleur. Et le plus intéressant dans tout ça, c’est que cette technique reste accessible même si vous débutez complètement en développement web.
Dans ce tutoriel, vous allez apprendre à créer un background animé avec un changement de couleur fluide, comprendre le rôle des dégradés CSS, maîtriser les @keyframes, et personnaliser l’animation pour obtenir un rendu professionnel.
- Voici ce que nous allons coder :
Animation background CSS
- Pourquoi créer une animation de background en CSS ?
- Le code HTML de départ
- Création du fichier CSS
- Comprendre la propriété animation
- Découvrir les @keyframes
- Comprendre background-position
- Personnaliser les couleurs et l'animation
- Ajouter un effet encore plus spectaculaire
- Une version encore plus moderne
- Le code complet de l'animation background en CSS pour un changement de couleurs automatique
- FAQ : Animation background et changement de couleur en CSS
Pourquoi créer une animation de background en CSS ?
Aujourd’hui, les sites modernes cherchent constamment à capter l’attention du visiteur. Pourtant, il ne suffit pas d’ajouter des dizaines d’effets spéciaux partout. Souvent, un simple changement de couleur bien pensé suffit à rendre une interface beaucoup plus vivante.
Une animation background permet notamment :
- d’ajouter du dynamisme à une page,
- de moderniser un design,
- de créer une ambiance particulière,
- d’attirer l’œil sur une section importante,
- ou simplement de rendre un site plus agréable visuellement.
Le gros avantage du CSS, c’est qu’il permet de réaliser ce type d’effet sans dépendre d’une librairie externe ou d’un script complexe.
- Moins de code, moins de chargement, et souvent de meilleures performances.
Le résultat final de notre animation
Avant de commencer, voici ce que nous allons créer :
- un fond en dégradé multicolore,
- des couleurs qui bougent automatiquement,
- une transition fluide et continue,
- une animation entièrement réalisée en CSS.
Le rendu donne une impression de mouvement très moderne, un peu comme certains arrière-plans que l’on retrouve sur les sites d’agences web ou d’applications mobiles.
Animation background CSS
Le code HTML de départ
Nous allons commencer avec une structure HTML extrêmement simple.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Background CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Background animé</h1>
</body>
</html>Prenons quelques secondes pour comprendre ce fichier.
- La balise
<!DOCTYPE html>indique au navigateur qu’il s’agit d’une page HTML moderne. - Ensuite, la balise
<html lang="fr">précise que le contenu est en français. C’est utile pour le référencement SEO et l’accessibilité.
Dans le <head>, nous relions le fichier CSS avec :
<link rel="stylesheet" href="style.css">Cela signifie simplement : “charge le fichier style.css pour styliser la page”.
Enfin, dans le <body>, nous ajoutons un simple titre :
<h1>Background animé</h1>Pour le moment, ce texte paraît banal. Mais vous allez voir qu’avec le CSS, l’ensemble va complètement changer d’apparence.
Création du fichier CSS
Créez maintenant un fichier nommé :
style.cssPuis ajoutez ce code :
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial, sans-serif;
color:white;
overflow:hidden;
background:linear-gradient(-45deg, #ff6b6b, #6c5ce7, #00cec9, #fdcb6e);
background-size:400% 400%;
animation:backgroundAnimation 12s ease infinite;
}
h1{
font-size:3rem;
text-shadow:0 0 10px rgba(0,0,0,0.3);
}
@keyframes backgroundAnimation{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}Oui, cela peut sembler impressionnant au premier regard. Mais rassurez-vous : nous allons décortiquer chaque ligne ensemble.
Et vous allez vite réaliser que cette animation background en CSS repose finalement sur quelques concepts simples.
Première étape : réinitialiser les marges
Commençons par cette partie :
*{
margin:0;
padding:0;
box-sizing:border-box;
}Le symbole * signifie :
“sélectionne tous les éléments de la page”.
Les navigateurs ajoutent automatiquement des marges et espacements par défaut. Cela peut provoquer des décalages visuels gênants.
Nous remettons donc tout à zéro avec :
margin:0;
padding:0;Puis :
box-sizing:border-box;Cette propriété simplifie énormément la gestion des tailles des éléments. C’est un peu le “réflexe automatique” de nombreux développeurs web.
Comprendre le height:100vh
Dans le body, nous avons :
height:100vh;Le vh signifie :
“viewport height”.
Autrement dit :
100vh= 100% de la hauteur visible de l’écran.
Grâce à cela, notre animation background occupe toute la page.
Sans cette ligne, le fond animé pourrait ne couvrir qu’une petite partie de l’écran.
👉 Pour en savoir plus : Les unités viewport en CSS
Centrer le contenu avec Flexbox
Ensuite :
display:flex;
justify-content:center;
align-items:center;Ici, nous utilisons Flexbox.
Et honnêtement, quand on découvre Flexbox pour la première fois, on a souvent envie d’applaudir les développeurs qui l’ont inventé. Parce qu’avant Flexbox, centrer un élément verticalement relevait presque de la magie noire.
Avec ces trois lignes :
display:flexactive Flexbox,justify-content:centercentre horizontalement,align-items:centercentre verticalement.
Résultat, le titre apparaît parfaitement au milieu de l’écran.
La propriété magique : linear-gradient
Nous arrivons maintenant au cœur de notre changement de couleur.
background:linear-gradient(-45deg, #ff6b6b, #6c5ce7, #00cec9, #fdcb6e);Cette ligne crée un dégradé de couleurs. Le navigateur mélange automatiquement plusieurs teintes.
Ici, nous utilisons :
- un rose,
- un violet,
- un turquoise,
- un jaune.
- Le
-45degreprésente l’angle du dégradé.
Vous pouvez imaginer cela comme une direction de lumière.
Par exemple :
linear-gradient(90deg, red, blue);Cela va créer un dégradé horizontal.
Tandis que :
linear-gradient(180deg, red, blue);Cela va donc créer un dégradé vertical.
Pourquoi utiliser plusieurs couleurs ?
Un simple changement de couleur entre deux teintes fonctionne déjà.
- Mais avec plusieurs couleurs, l’animation devient beaucoup plus riche visuellement.
Le mouvement paraît plus naturel et le fond semble “vivant”.
C’est précisément ce qui donne cet effet moderne très apprécié dans le webdesign actuel.
Le rôle essentiel de background-size
Voici probablement la ligne la plus mystérieuse du tutoriel :
background-size:400% 400%;Pourtant, elle est essentielle. Par défaut, le fond occupe exactement la taille de l’écran. Mais ici, nous agrandissons énormément le dégradé.
Imaginez une immense image colorée derrière votre page. Ensuite, grâce à l’animation CSS, nous allons déplacer cette image.
- C’est ce déplacement qui crée l’effet de changement de couleur.
Sans cette ligne, l’animation serait presque invisible.
Comprendre la propriété animation
Nous arrivons maintenant à la ligne qui déclenche toute la magie :
animation:backgroundAnimation 12s ease infinite;Décomposons-la morceau par morceau.
Le nom de l’animation
backgroundAnimationC’est simplement le nom de notre animation.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Ce nom doit correspondre au bloc :
@keyframes backgroundAnimationLa durée
12sL’animation dure 12 secondes.
Plus la durée est courte :
- plus le mouvement sera rapide.
Plus elle est longue :
- plus l’effet sera doux et relaxant.
Le mode ease
easeCela rend les mouvements plus naturels. L’animation accélère puis ralentit légèrement. Sans cela, le déplacement serait mécanique et moins agréable.
Le mode infinite
infiniteCela signifie :
“recommence à l’infini”.
Votre background animé continue donc sans interruption.
👉 Pour aller plus loin : La propriété animation en CSS
Découvrir les @keyframes
Voici la partie la plus importante :
@keyframes backgroundAnimation{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}Les @keyframes définissent les étapes d’une animation CSS.
Vous indiquez au navigateur :
- comment commence l’animation,
- comment elle évolue,
- puis comment elle se termine.
👉 Tout savoir sur : La propriété keyframes en CSS
Comprendre background-position
Ici, nous animons :
background-positionCette propriété déplace le fond.
Au début :
0% 50%Puis au milieu :
100% 50%- Le dégradé se déplace horizontalement.
- Ensuite, il revient à sa position initiale.
C’est ce mouvement qui donne cette impression de changement de couleur automatique.
Pourquoi l’effet paraît fluide ?
Parce que le navigateur calcule toutes les étapes intermédiaires automatiquement.
Vous définissez uniquement :
- le début,
- le milieu,
- la fin.
Et le CSS s’occupe du reste.
Franchement, quand on découvre ça pour la première fois, on comprend pourquoi les animations CSS sont devenues aussi populaires.
Personnaliser les couleurs et l’animation
Vous pouvez évidemment modifier les couleurs.
Par exemple :
background:linear-gradient(-45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00ab);Cette version produit un effet beaucoup plus flashy.
Animation background CSS
À l’inverse, des couleurs pastel donneront une ambiance plus douce.
Créer une ambiance professionnelle
Pour un site moderne et élégant, privilégiez :
- des couleurs proches,
- des tons légèrement désaturés,
- des transitions douces.
Par exemple :
background:linear-gradient(-45deg,
#1e3c72,
#2a5298,
#4facfe,
#00f2fe);Animation background CSS
Ce type de palette fonctionne très bien pour :
- un portfolio,
- un site d’agence,
- une landing page,
- une application web.
Modifier la vitesse de l’animation
Vous trouvez le changement de couleur trop rapide ?
Modifiez simplement :
12sPar exemple :
animation:backgroundAnimation 20s ease infinite;cLe mouvement deviendra beaucoup plus lent.
Et souvent, les animations lentes paraissent plus professionnelles.
Ajouter un effet encore plus spectaculaire
Vous pouvez également créer un mouvement permanent dans plusieurs directions.
Exemple :
@keyframes backgroundAnimation{
0%{
background-position:0% 50%;
}
25%{
background-position:50% 100%;
}
50%{
background-position:100% 50%;
}
75%{
background-position:50% 0%;
}
100%{
background-position:0% 50%;
}
}Cette fois, le fond se déplace dans plusieurs directions.
Animation background CSS
L’effet devient plus dynamique.
Peut-on utiliser cette technique partout ?
Oui… mais avec modération. Une animation background est idéale pour :
- une page d’accueil,
- une section héro,
- un écran de connexion,
- une bannière.
En revanche, évitez d’en mettre absolument partout. Sinon, votre site risque de ressembler à une boule disco des années 2000. Et vos visiteurs pourraient rapidement avoir mal aux yeux.
Optimiser les performances
Les animations CSS sont généralement très performantes parce qu’elles sont gérées directement par le navigateur.
Cependant, quelques bonnes pratiques restent importantes :
- évitez des animations trop rapides,
- limitez les effets extrêmement complexes,
- utilisez des couleurs cohérentes,
- testez sur mobile.
Ajouter du texte lisible sur le fond
Quand le background change de couleur, le texte peut parfois devenir difficile à lire.
C’est pourquoi nous avons ajouté :
text-shadow:0 0 10px rgba(0,0,0,0.3);Cette ombre améliore la lisibilité.
Vous pouvez aussi ajouter :
background-color:rgba(0,0,0,0.3);sur certains blocs de texte pour renforcer le contraste.
Une version encore plus moderne
Voici une version légèrement améliorée du code :
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:linear-gradient(
-45deg,
#ff6b6b,
#6c5ce7,
#00cec9,
#fdcb6e
);
background-size:400% 400%;
animation:backgroundAnimation 15s ease infinite;
}- Le code est plus aéré.
Et croyez-moi : un code bien présenté vous fera gagner énormément de temps plus tard.
Votre futur vous remerciera.
Le code complet de l’animation background en CSS pour un changement de couleurs automatique
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background animé</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
font-family:Arial, sans-serif;
color:white;
overflow:hidden;
/* Animation du fond */
background:linear-gradient(-45deg, #ff6b6b, #6c5ce7, #00cec9, #fdcb6e);
background-size:400% 400%;
animation:backgroundAnimation 12s ease infinite;
}
h1{
font-size:3rem;
text-shadow:0 0 10px rgba(0,0,0,0.3);
}
@keyframes backgroundAnimation{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}
</style>
</head>
<body>
<h1>Background animé</h1>
</body>
</html>FAQ : Animation background et changement de couleur en CSS
Comment créer une animation background en CSS ?
Pour créer une animation background en CSS, il suffit d’utiliser un dégradé avec linear-gradient, puis d’animer sa position grâce aux @keyframes. Cette technique permet de réaliser un changement de couleur fluide et automatique sans utiliser JavaScript.
Peut-on faire un changement de couleur automatique uniquement avec du CSS ?
Oui, le CSS permet de créer un changement de couleur automatique très facilement grâce aux animations CSS. En combinant les propriétés animation, background-size et background-position, vous pouvez obtenir un fond animé moderne et fluide sur n’importe quelle page web.
Les animations de background en CSS ralentissent-elles un site web ?
Dans la majorité des cas, une animation background en CSS reste très légère et performante. Les navigateurs modernes optimisent très bien ce type d’effet visuel. Il est toutefois conseillé d’éviter les animations trop rapides ou trop complexes afin de conserver une navigation fluide, notamment sur mobile.
Créer une animation background avec un changement de couleur en CSS est probablement l’un des meilleurs moyens de donner immédiatement un aspect moderne à une page web sans écrire des centaines de lignes de code.
En plus, cette technique vous permet de découvrir plusieurs notions essentielles du CSS comme les dégradés, les animations, les @keyframes et les propriétés de positionnement. Autrement dit, derrière ce simple effet visuel se cachent des concepts extrêmement utiles pour progresser en développement web.
Le plus important maintenant, ce n’est pas de recopier le code mot pour mot. Essayez plutôt de modifier les couleurs, la vitesse, les directions ou même les mouvements. Testez. Cassez des choses. Recommencez. C’est exactement comme ça qu’on apprend réellement à coder.
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi