Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

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

le Dim 12 Mai - 17:01

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 Smile
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 !

Définition des transitions

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 propriétés de transitions

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.

Quelques exemples concrets

Changer l'opacité d'un bloc au passage de la souris

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 :


Mon bloc a une opacité de 1

Code:
<style>.mon_bloc{background:black;
color:white;
width:200px;
height:50px;
opacity:1;
}</style>
<div class="mon_bloc">Mon bloc a une opacité de 1</div>



Mon bloc a une opacité de 0.5

Code:
<style>.mon_bloc{background:black;
color:white;
width:200px;
height:50px;
opacity:0.5;
}</style>
<div class="mon_bloc">Mon bloc a une opacité de 0.5</div>



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

Mon bloc a une opacité de 1 et passe à 0.5 quand je passe la souris

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>

Faire tourner un bloc au passage de la souris

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 :

Mon bloc tourne quand je passe ma souris dessus

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>

Passer en noir et blanc au passage de la souris

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.

avatar
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 Wink 0% -> En couleur, 100% -> en noir en blanc

Gérer la durée des animations

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 :


Mon bloc tourne quand je passe ma souris dessus

Code:
<style>.mon_bloc4{
background:black;
color:white;
width:200px;
height:100px;
}
 .mon_bloc4:hover{
transform: rotate(180deg);
transition-duration:2s;
}</style>
<div class="mon_bloc4">Mon bloc tourne quand je passe ma souris dessus</div>



Mon bloc a une opacité de 1 et passe à 0.5 quand je passe la souris

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



avatar
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" />

Oui mais quand on retire la souris le retour "à la normale" est brutal

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


Mon bloc tourne quand je passe ma souris dessus

Code:
<style>.mon_bloc6{
background:black;
color:white;
width:200px;
height:100px;
transition-duration:2s;
}
 .mon_bloc6:hover{
transform: rotate(180deg);
transition-duration:2s;
}</style>
<div class="mon_bloc6">Mon bloc tourne quand je passe ma souris dessus</div>



Mon bloc a une opacité de 1 et passe à 0.5 quand je passe la souris

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



avatar
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" />

Idea 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 Wink



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 Smile ), 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 !



Dernière édition par Mäven le Jeu 6 Juin - 18:31, édité 1 fois
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

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

le Ven 7 Juin - 10:54
Mise à jour du 07/06/19


Le tutoriel a été revu pour être complété Smile

_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses