Introduction
LES FONDAMENTAUX ET TECHNIQUES AVANCEES DU HTML/XHTML
LES BASES DU HTML5 et les propriétés CSS3 courantes
HTML5 : Les nouvelles et autres balises html5
ANNEXES
Travailler en HTML5 et CSS3 avec les nouvelles balises et propriétés
Les nouveaux API du HTML5 (javascript)
Détails de la leçon
Description de la leçon
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.
Objectifs de cette leçon
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.
Prérequis pour cette leçon
Pour suivre cette leçon, il est recommandé d'avoir des connaissances de base en HTML et en CSS. Une familiarité avec les propriétés CSS, les sélecteurs, et la syntaxe générale.
Métiers concernés
Les compétences acquises dans cette leçon peuvent être appliquées dans les domaines de :
- Développement Web
- UX/UI Design
- Création de contenus interactifs
- Intégration web
- Web Design
Alternatives et ressources
En l'absence de prise en charge des transitions CSS, vous pouvez utiliser des solutions en JavaScript telles que jQuery ou des bibliothèques d'animation JavaScript comme GreenSock(GSAP).
Questions & Réponses
Je m'abonne