CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 et CSS3 - Tutoriel vidéo avec un expert du Web

Création d’animations CSS : Leçon pratique

Retour à la formation
Chapitre 6 Leçon 11
Précédent
Suivant

Dans cette leçon, apprenez à créer des animations CSS pour animer des textes et des flèches sur votre site web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons apprendre à créer des animations CSS pour donner vie à vos pages web. Une animation se distingue d’une transition par sa capacité à passer par des étapes intermédiaires. Nous commencerons par animer la couleur des textes lorsque la souris passe dessus, puis nous animerons une flèche qui pointe vers un élément précis de l’image après clic.

Nous définirons deux animations :

  1. Animation en couleurs des textes au survol.
  2. Animation d’une flèche pointant vers un endroit précis.

Chaque étape sera détaillée, de l’utilisation des mots-clés @-webkit-keyframe à l’application des propriétés d’animation telles que Animation-Duration et Animation-Iteration-Count. Vous verrez également comment utiliser les préfixes -webkit pour garantir une meilleure compatibilité avec les navigateurs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont:

  • Comprendre la différence entre les transitions et les animations CSS.
  • Apprendre à utiliser les préfixes -webkit pour la compatibilité navigateur.
  • Créer des animations en couleurs sur des éléments de texte.
  • Animer une flèche pour pointer vers un élément précis sur une page.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d’avoir :

  • Des connaissances de base en CSS et HTML.
  • Une compréhension de l’utilisation de sélecteurs CSS.
  • Un environnement de développement ou un éditeur de code (comme Visual Studio Code ou Sublime Text).

Métiers concernés

Les compétences acquises dans cette leçon sont utiles pour des métiers tels que :

  • Développeur Frontend
  • Designer Web
  • Développeur Full-Stack

Alternatives et ressources

Bien que cette leçon utilise CSS pur avec des préfixes -webkit, certains frameworks et bibliothèques comme Animate.css ou GreenSock (GSAP) peuvent également être utilisés pour créer des animations sophistiquées.

Questions & Réponses

Les transitions modifient les propriétés CSS d'un état initial à un état final, tandis que les animations peuvent passer par des étapes intermédiaires définies par l'utilisateur.
Le préfixe -webkit permet de garantir la compatibilité des animations CSS avec les navigateurs basés sur le moteur WebKit, tels que Safari et Chrome.
La durée d'une animation en CSS est spécifiée à l'aide de la propriété 'animation-duration', où la durée est donnée en secondes ou millisecondes.