CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 et CSS3 Création d’animations CSS : Leçon pratique

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

Les Animations
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML 5 et CSS3
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Apprendre à animer des textes et des éléments en utilisant CSS

Objectifs

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.

Résumé

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

Description

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.

Voir plus

Questions - réponses

Quelle est la principale différence entre une transition et une animation en CSS ?
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.
Pourquoi utilisons-nous le préfixe -webkit dans les animations CSS ?
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.
Comment spécifier la durée d'une animation en CSS ?
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.

Programme détaillé