Introduction aux Animations CSS
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à créer des animations de base en CSS.
- Comprendre l'utilisation des keyframes pour définir des mouvements.
- Maîtriser l'application des préfixes pour la compatibilité inter-navigateurs.
Résumé
Découvrez comment animer une image en utilisant les propriétés de CSS pour créer des effets dynamiques sur votre page web.
Description
Dans cette leçon, nous explorons la manière de créer des animations en CSS à travers un exemple pratique de déplacement d'une image. Le processus commence par la mise en place de l'élément image en position absolue, en prenant le body comme élément parent. Nous définissons ensuite une animation nommée 'déplacer' avec des préfixes spécifiques pour différents navigateurs.
Ensuite, nous configurons les keyframes pour décrire le mouvement de l'image de 0% à 100%, en modifiant les propriétés left et top à divers points. Nous observons comment ces modifications animent notre image à l'écran.
L'animation est rendue plus dynamique en variant les points de changement et les propriétés CSS utilisées. Nous explorons des scénarios où l'image change de direction et de vitesse en ajustant les pourcentages de keyframes et les valeurs de propriétés. Enfin, nous discutons des propriétés CSS compatibles avec les animations et les limitations, comme l'incompatibilité avec display: none et display: block.
Questions - réponses
Programme détaillé
Module 1 - Introduction à la formation HTLM5 et CSS3
Module 2 - Les bases de la mise en page
Module 3 - La mise en page avancée
Module 4 - Autres sélecteurs et propriétés
Dommage.