Les
transitions
Vous connaissez tous la pseudo-classe hover
qui permet de faire changer un élément au passage de la souris
? Et bien nous allons nous servir de ça pour les transitions.
Exemple simple : faire changer la boîte de largeur au
hover.
Pour ça, rien de plus simple (fig.1).
Fig1 :
HTML :
<div
class='fig1'></div>
CSS :
.fig1
{
width:
100px;/*
Largeur de la boîte */
heigth:
100px:/*
Hauteur de la boîte */
background:
deepskyblue;/*
Un fond pour voir la boîte */
}
.fig1:hover
{
width:
150px;/*
Pour changer la taille au survol */
}
C'est déjà bien,
mais ce que nous voudrions maintenant c'est que la taille change
progressivement. Pour cela, nous allons utiliser la propriété CSS
transition.
Mais le problème, c'est que cette propriété ne marche pas sur tous
mes navigateurs ! Nous allons donc devoir utiliser ce que l'on
appelle des préfixes vendeurs.
Les préfixes vendeurs sont des mots à mettre devant les propriétés
qui ne marche pas sur tous les navigateurs. Les préfixes vendeurs
sont :
- Pour Google Chrome et Safari : -webkit-
- Pour Mozilla Firefox : -moz-
- Pour Internet Explorer : -ms-
- Pour Opéra : -o-.
Pour faire une
transition, nous allons donc par exemple faire (voir fig.2) :
HTML :
<div
class='fig2'></div>
CSS :
.fig2
{
width:
100px;/*
Largeur de la boîte */
heigth:
100px; /*
Hauteur de la boîte */
background:
deepskyblue;/*
Un fond pour voir la boîte */
-webkit-transition:
width
0.5s ease;
-moz-transition:
width 0.5s ease;
-ms-transition:
width 0.5s ease;
-o-transition:
width 0.5s ease;
transition:
width/* propriété
qui change */ 0.5/*
Temps de l'animation */ ease/*
Façon dont c'est animé */;
}
.fig2:hover
{
width:
150px;/*
Pour changer la taille au survol */
}
Notez que la valeur
ease peut être changée : ease (départ rapide, arrivée lente),
ease-in (départ lent), ease-in-out (départ lent, arrivée lente),
linear (aucune accélération), il en existe d'autre plus
compliquées.
Résultat (fig.2) :
Et voilà, c'est
tout (simple) !
Pas mal!J'aime bien mais j'ai toujours une question:La propriété transition peut-elle s'utiliser dans d'autres cas?(je crois connaître la réponse)
RépondreSupprimerSi oui dans lesquels?
.
Oui, par exemple en changeant la couleur d'un texte, faire apparaître des choses, etc...
RépondreSupprimerCe commentaire a été supprimé par un administrateur du blog.
RépondreSupprimer