Créer des Animations en CSS3

Les propriétés de transitions
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

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d’enseigner :

  • Les bases des animations CSS3
  • Comment utiliser les propriétés de transition
  • À composer des effets transitionnels complexes

Découvrez comment utiliser CSS3 pour créer des animations, en effectuant des transitions entre les propriétés CSS.

Le CSS3 offre une manière puissante et élégante de réaliser des animations autrefois complexes, habituellement gérées par JavaScript. À travers cette leçon, nous explorerons un exemple pratique utilisant des transitions pour agrandir et changer la couleur d’une boîte au survol de la souris. Vous apprendrez à définir différentes propriétés de transition telles que transition-duration et transition-timing-function, pour créer des effets dynamiques et progressifs.

Nous aborderons les valeurs possibles comme ease, linear, ease-in, et ease-out pour contrôler l'interpolation de l'animation. Enfin, nous verrons comment enchaîner plusieurs propriétés et utiliser des décalages de temps (transition-delay) pour orchestrer des animations complexes.

Voir plus
Questions réponses
Quelles propriétés CSS sont nécessaires pour créer une animation avec transition ?
Pour créer une animation avec transition, vous devez définir les propriétés CSS initiales, les propriétés de destination lors de l'interaction, ainsi que des propriétés de transition telles que transition-property, transition-duration, et transition-timing-function.
Qu'est-ce que la propriété transition-timing-function ?
La propriété transition-timing-function définit la courbe d'accélération de l'animation, permettant de contrôler la rapidité et le ralentissement des effets de transition.
Quelle est l'utilité de la propriété transition-delay ?
La propriété transition-delay permet de retarder le début de l'animation, permettant de créer des effets séquencés où certaines transitions commencent après d'autres.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 9 mois
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 1 an
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 !