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

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

Sébastien Imbert
5,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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é

Plan détaillé du cours

Leçon 1Préparation des images
15m07s
Leçon 2Intégration du header
12m52s
Leçon 3Animation avec les keyframes
07m55s
Leçon 4Responsive et compatibilité
05m06s

Aperçus

Avis des apprenants

Détail des avis
150
Apprenants
11
Commentaires
5/5
Note moyenne
5/5
11
4/5
0
3/5
0
2/5
0
1/5
0
Jean Berdier
Jean Berdier
Publié le 02/01/2024
Amusant, sympa et qui ne prend pas la tête
Membre-5709-6082
Membre-5709-6082
Publié le 10/02/2021
Très bon tuto - clair et concis. Merci beaucoup.
Franck Richard
Franck Richard
Publié le 20/10/2020
Très intéressant l'animation en CSS. Bon tuto.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données