Créer un background animé avec les keyframes en CSS 3
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
41m
de formation
4
leçons vidéo
1
chapitre
Débutant
niveau requis
Sébastien Imbert
Sébastien Imbert
Formateur

Créer un background animé avec les keyframes en CSS 3

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
41m
de formation
4
leçons vidéo
1
chapitre

Dans ce tuto vidéo, je vous propose d'apprendre à réaliser un background animé en CSS3, à l'aide d'images et d'animations avec les keyframes CSS.

Au cours de ce tuto background animé et keyframes CSS nous verrons :

  • comment choisir les illustrations et comment les enregistrées pour les utiliser dans la création du background (choix de la taille, format, et optimisation de leur poids sur Illustrator et Photoshop)
  • l'utilisation d'un pattern pour répéter la même image autant de fois que nécessaire
  • l'utilisation des keyframes et de leur syntaxe

Qu'ils soient purement décoratifs, ou qu'ils permettent de mettre en avant un produit, ou un service, les background animés peuvent se révéler être un choix intéressant et original, car peu courant sur le Web. 

À l'issu de ce tuto, vous serez en mesure de créer vos propres background animé, à l'aide de vos propres illustrations.
L'animation du background fonctionnera aussi bien sur tablette que sur mobile.
Je reste disponible en cas de besoin, dans la section entraide.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Préparation des images
Leçon 2
Intégration du header
Leçon 3
Animation avec les keyframes
Leçon 4
Responsive et compatibilité

Table des matières

Leçon 1

Préparation des images

15m07
Leçon 2

Intégration du header

12m52
Leçon 3

Animation avec les keyframes

07m55
Leçon 4

Responsive et compatibilité

05m06

Aperçus

Avis des apprenants

Détail des avis
311
Apprenants
14
Commentaires
5/5
Note moyenne
5/5
14
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 19/06/2025
Finalement j'ai trouvé ce tuto intéressant et ça m'a permis de réviser un peu les animation. Ça donne quelque chose de vraiment sympa (sans en abuser). Vos explications sont parfaites :-) Merci beaucoup.
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 20/08/2024
Simple et efficace. Merci
Valerie Caruana
Valerie Caruana
Publié le 01/07/2024
Très intéressant, bien expliqué. Merci !

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
4,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
41m de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données