Générateur de transitions CSS3


Les transitions CSS vous permettent de changer de valeurs de propriétés, en douceur, d'une valeur à l'autre, sur une certaine durée. Vous pouvez également ajouter un délai et une fonction de courbe de vitesse.

Effects
Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin

La propriété transition vous permet de modifier les valeurs des propriétés CSS d'un élément en douceur, sur une certaine durée. Cette propriété est souvent utilisée en correspondance avec le survol de la souris sur un élément.

Supposons que vous ayez un élement de type bouton, identifié MonBouton, et défini comme ci-dessous, pour lequel vous souhaitez un changement de couleur d'arrière plan au survrol de la souris :

<button role="button" id="MonBouton">Bouton</button>

La syntaxe de la transition est la suivante :

#MonBouton {
    width: 100px;
    background-color: #337ab7;
    color: white;
    transition: all 0.3s ease
}

Le premier paramètre permet de définir quelle propriété CSS3 sera affectée par la transition. all signifie que la transition concerne n'importe quelle propriété CSS.
Dans notre cas, nous aurions pu remplacer all par background-color.

Le deuxième paramètre permet de définir la durée en secondes (s) ou en millisecondes (ms), de la transition. Dans notre exemple la durée est de 0.3 secondes.

Le troisième paramètre (optionnel) est la courbe de vitesse de la transition. Ci-dessous, quelques fonctions qui peuvent être utilisées :

  • ease : valeur par défaut. Spécifie un effet de transition avec un démarrage lent, puis rapide, puis lent.
  • linear : spécifie un effet de transition avec la même vitesse du début à la fin.
  • ease-in : spécifie un effet de transition avec un démarrage lent.
  • ease-out : spécifie un effet de transition avec une fin lente.
  • ease-in-out : spécifie un effet de transition avec un début et une fin lents.

Enfin, on peut ajouter un délai, optionnel, afin de décaler la transition selon une durée.

Maintenant que la transition est définie, nous pouvons utiliser un :hover pour modifier la couleur du bouton au survol de la souris :

#MonBouton:hover {    
    background-color: #1e4668;    
}


Il est possible de cumuler plusieurs transitions, sur des propriétés différentes, afin de les faire varier avec des durées ou délais différents. Ci-dessous, un exemple :

<div id="MonDiv"> </div>
#MonDiv {
    width: 100px;
    height:100px;
    background-color: #337ab7;    
    transition: background-color 0.3s ease, height 2s ease, width 2s 2s ease;     
}
#MonDiv:hover {    
    background-color: #e86200;
    height: 150px;
    width: 150px;
}

Il ne faut pas oublier d'ajouter systématiquement les préfixes de navigateurs suivants, afin de rester compatible avec le plus grand nombre de navigateurs possible :

#MonDiv {      
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition all 0.3s ease;   
}
Etant donné qu'il faut inclure ces 4 lignes, utiliser un générateur de CSS comme MakingCSS permet de gagner du temps et d'éviter les erreurs.

Laisser votre avis