Maîtriser les transitions CSS

Propriétés CSS pour les transitions
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

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

DescriptionProgrammeAvis
3,0
59,90€ Je commande

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

L'objectif de cette vidéo est de vous apprendre à utiliser les transitions CSS pour créer des effets visuels attrayants et fluides sur vos pages web.

Apprenez à réaliser des transitions CSS pour rendre vos pages web plus dynamiques et agréables à naviguer.

Cette leçon vous enseignera les bases des transitions CSS, en vous montrant comment animer les propriétés CSS sur différents éléments de votre page web. Nous commencerons par un exemple simple d'un texte coloré qui change de couleur au survol, puis nous explorerons comment rendre ce changement plus fluide avec la propriété transition. Nous aborderons également les différentes composantes de cette propriété, telles que la durée, le délai, et la fonction de timing. Ensuite, nous appliquerons ces concepts aux images pour créer un effet de diaporama interactif. À la fin de cette leçon, vous serez capable de créer des transitions complexes et élégantes, améliorant ainsi l'expérience utilisateur de vos sites web.

Voir plus
Questions réponses
Qu'est-ce qu'une transition CSS?
Une transition CSS permet de créer des effets de changement progressif entre deux états de style d'un élément HTML, sans avoir besoin de JavaScript.
Quels sont les composants principaux de la propriété transition?
Les composants principaux sont la durée (duration), la propriété à faire changer (property), le délai (delay) et la fonction de timing (timing function).
Quel est l'effet de la fonction de timing 'ease' en CSS?
La fonction de timing 'ease' génère une transition qui commence lentement, s'accélère en milieu d'intervalle, puis ralentit à nouveau vers la fin.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 year
Commentaire
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.