CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Animer des Éléments HTML/CSS avec Keyframes

Animer des Éléments HTML/CSS avec Keyframes

Les propriétés d'animation
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Création d'Animations en Boucle

Objectifs

À la fin de cette vidéo, vous serez capables de :

  • Configurer les animations CSS de base.
  • Utiliser les keyframes pour définir des étapes d'animation.
  • Contrôler l'apparition et la disparition des éléments HTML/CSS.
  • Implémenter des animations en boucle infinie.

Résumé

Apprenez à animer des éléments HTML/CSS en boucle, utilisant les keyframes et les propriétés d'animation pour un rendu dynamique.

Description

Dans cette leçon, nous abordons la création et l'animation d'éléments HTML/CSS avec les keyframes. Nous commençons par préparer le code HTML avec une div class box, une image et une div content box contenant un titre, des paragraphes et un lien. Le CSS est configuré pour positionner les éléments relatifs et absolus et appliquer des dégradés et des opacités.

Nous détaillons la mise en place d'une animation CSS pour faire apparaître et disparaître les éléments à différentes étapes de l'animation. Les propriétés telles que animation-name, animation-duration, animation-iteration-count, et animation-timing-function sont expliquées de manière détaillée. Ensuite, nous utilisons la règle @keyframes pour spécifier les comportements des éléments à différents pourcentages de l'animation.

Des classes sont attribuées pour chaque élément à animer, et chaque animation est configurée pour démarrer à des moments décalés, créant un effet de succession. Enfin, nous démontrons comment contrôler l'animation pour que les éléments apparaissent et disparaissent de manière fluide et en boucle infinie, utilisant des propriétés d'animation spécifiques et des délais stratégiques.

Voir plus

Questions fréquentes

Pourquoi utilise-t-on les keyframes dans les animations CSS ?
Les keyframes permettent de définir des étapes spécifiques de l'animation à différents pourcentages de son exécution.
Quelle propriété CSS permet de définir la durée d'une animation ?
La propriété CSS animation-duration permet de définir la durée d'une animation.
Comment faire jouer une animation CSS en boucle infinie ?
On utilise la propriété animation-iteration-count avec la valeur 'infinite' pour faire jouer une animation en boucle infinie.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !