Mouvement

Notre site web est trop statique… Ajoutons un peu de mouvement !

Transitions

Dans le TP précédent, nous avons fait en sorte que lorsque la souris survole un élément du menu, son arrière-plan soit modifié. Nous allons ajouter une transition à cette modification, comme dans l'exemple suivant.

1. S'informer sur les transitions CSS.
2. En suivant ces instructions, faire en sorte le changement de couleur de l'arrière-plan soit un fondu entre les deux couleurs.
3. Ajouter les transitions suivantes (au même élément de menu) :
   • la couleur du texte ;
   • la taille du texte (utiliser la propriété transform: scale()) ;
   • une autre transition de votre choix.

Animation

1. Ajouter un logo en haut à gauche de votre page web (choisir une image, et l'afficher en haut à gauche de la page).
2. S'informer sur les animations CSS.
3. Utiliser l'animation de votre choix pour donner un peu de vie à votre logo.

Validation

Vérifiez que les pages ne produisent aucune erreur sur http://validator.w3.org, et que le fichier style.css ne produit aucune erreur sur https://jigsaw.w3.org/css-validator/.

Évaluation

Complétez la fiche d'évaluation, copiez votre travail (fichiers html et css) dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.