Introduction aux transitions CSS
Objectifs
Les objectifs de cette vidéo sont :
- Comprendre le principe des transitions CSS3.
- Apprendre à utiliser les propriétés de transition en CSS.
- Réaliser des animations simples comme le changement de couleur, la modification d'opacité, et la rotation d'éléments.
- Adapter les transitions pour une compatibilité multi-navigateurs.
Résumé
Découvrez comment réaliser des transitions fluides en CSS sans utiliser de scripts JavaScript. Utilisez les propriétés CSS3 pour améliorer l'expérience utilisateur sur vos pages web.
Description
Dans cette leçon, nous allons explorer comment réaliser des transitions en douceur en utilisant uniquement des propriétés CSS, sans recourir à des scripts JavaScript. Les propriétés CSS3 offrent une riche palette de possibilités pour animer le passage d'un état à un autre, par exemple lors du survol ou du clic sur un élément. Une transition CSS est essentiellement une animation qui modifie progressivement une propriété CSS d'un état initial à un état final. Nous commencerons par changer la couleur d'un texte lors du survol de la souris, puis nous passerons à un exemple plus complexe impliquant l'opacité de deux images superposées. L'élément final de cette leçon portera sur la création d'un petit menu dont les éléments icônes effectueront une rotation lors du survol. Nous utiliserons la propriété transition et ses sous-propriétés telles que transition-property, transition-duration, transition-timing-function et transition-delay.
Nous mettrons en œuvre ces techniques à travers des exemples pratiques, notamment l'utilisation des préfixes pour assurer la compatibilité avec différents navigateurs. Enfin, nous aborderons les limitations actuelles avec certains navigateurs comme Firefox et comment y remédier en utilisant des alternatives ou en acceptant une dégradation gracieuse.
Questions fréquentes
Programme détaillé
Module 1 - Introduction
Module 2 - LES FONDAMENTAUX ET TECHNIQUES AVANCEES DU HTML/XHTML
Module 3 - LES BASES DU HTML5 et les propriétés CSS3 courantes
Module 4 - HTML5 : Les nouvelles et autres balises html5
Module 5 - ANNEXES
Module 6 - Travailler en HTML5 et CSS3 avec les nouvelles balises et propriétés
Module 7 - Les nouveaux API du HTML5 (javascript)
Module 8 - Conclusion
