CSS - Des transitions (au passage de la souris) en CSS

Bonjour à toi !

Voici un second tutoriel sur la CSS, qui va te permettre de mettre en page tes codes jusqu'au bout.
Tout d'abord, pour pouvoir comprendre ce tutoriel, tu dois avoir lu et compris ces tutoriels :
• Les bases du HTML
• Les principales balises
• Lier CSS et HTML
• CSS - Les propriétés les plus courantes
• CSS - Des propriétés structurantes
• CSS - Sélecteurs, pseudo-classes et pseudo-éléments

Maintenant que tu as tout lu, je vais te donner pleins de petites propriétés avec lesquelles tu vas pouvoir structurer visuellement tes codes
Ici nous allons d'abord voir les transition et faire des exemple en faisant :
• Changer l'opacité d'un bloc au passage de la souris
• Faire tourner un bloc au passage de la souris
• Faire passer un bloc en noir et blanc
• Gérer la durée de ces animations

C'est parti !


Les transitions permettent de passer d'un état A à un état B de manière plus fluide qu'un simplement changement. Souvent, ces transitions sont utilisées lors du passage de la souris sur un élément.


Les transitions se décomposent en plusieurs propriétés  :

• transition-property : propriété obligatoire, elle permet de définir à "quoi" on applique la transition : la largeur, la hauteur, l'opacité, etc...
• transition-duration : propriété obligatoire, elle définit la durée de la transition en seconde (s) ou milliseconde (ms).
• transition-timing-function : propriété facultative, on définit ici un effet sur le temps. Par défaut, ease est utilisé

• ease : Rapide sur le début et ralenti sur la fin.
  
• linear : La vitesse est constante sur toute la durée de l'animation.
  
• ease-in : Lent sur le début et accélère de plus en plus vers la fin.
  
• ease-out : Rapide sur le début et décéléré sur la fin.
  
• ease-in-out : Le départ et la fin sont lents.
  

• transition-delay : propriété facultative, elle définit l'avance ou le retard que prendra la transition vis à vis de son déclenchement.



Ici, la propriété que nous allons utiliser est : opacity.
Une opacité à 1 signifie qu'elle est complètement opaque alors qu'une opacité à 0 signifie que c'est totalement transparent. Ici, on peut mettre toutes les valeurs entre 0 et 1 (donc 0.1, 0.2, 0.3, ...).

Un petit exemple :


Maintenant pour que l'opacité change au passage de la souris, on va utiliser la pseudo-classe :hover
Comme ceci :

Code:

<style>
.mon_bloc2{
    background:black;
    color:white;
    width:200px;
    height:100px;
    opacity:1;
}
.mon_bloc2:hover{
    opacity:0.5;
}</style>
<div class="mon_bloc2">Mon bloc a une opacité de 1 et passe à 0.5 quand je passe la souris</div>

On va également utiliser la pseudo-classe :hover ici, ainsi que la propriété transform:rotate(Y px) en remplaçant Y par la valeur souhaitée :

Code:

<style>.mon_bloc3{
background:black;
color:white;
width:200px;
height:50px;
}
 .mon_bloc3:hover{
transform: rotate(180deg);
}</style>
<div class="mon_bloc3">Mon bloc tourne quand je passe ma souris dessus</div>

Comme on fait au passage de la souris : on utilise encore la pseudo-class :hover. On va utiliser la propriété filter: grayscale(X%); en remplaçant X par ta valeur.

Code:

<style>.mon_image:hover{filter: grayscale(100%); }</style>
<img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="avatar" class="mon_image" />

Tu peux aussi t'amuser avec le pourcentage pour faire plus ou moins noir et blanc 0% -> En couleur, 100% -> en noir en blanc


Ici on va simplement ajouter la propriété suivante sur les éléments concernés :

Code:

transition-duration: Xs;

Si je reprends les 2 exemples précédents ça donne :

Code:

<style>.mon_image2:hover{
filter: grayscale(100%);
transition-duration:2s;
}</style>
<img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="avatar" class="mon_image2" />

Eh oui... On va donc appliquer le transition-duration aussi à la classe sans le hover :

Code:

<style>.mon_image3{
transition-duration:2s;
}
.mon_image:hover{
filter: grayscale(100%);
 transition-duration:2s;
}</style>
<img src="http://pvereecken.fr/tambouille/sans_avatar.png" alt="avatar" class="mon_image3" />

Si on applique le transition-duration uniquement au sélecteur qui n'a pas de pseudo-classe, on économise une ligne de CSS et c'est pris en compte à tous moments

---

Et voilà, tu sais maintenant faire ces 3 petites animations. Tu peux bien entendu jouer avec toutes les propriétés que tu connais (par exemple arrondir les angles du rectangle en tournant ), les durées, l'opacité + la rotation, le degré de rotation, etc...
Amuse toi bien, et si tu as la moindre question n'hésite pas à la poser !