Comment faire des transitions avec CSS3 - les nuls

Parler de nouvelles fonctionnalités puissantes dans les feuilles de style en cascade (CSS): En associant classe avec la propriété de transition CSS3, vous pouvez ajouter des fonctionnalités interactives à vos objets sans l'utilisation de Flash, JavaScript ou jQuery!

La propriété de transition possède en réalité quatre paramètres, qui doivent être écrits dans le CSS dans l'ordre suivant: propriété, durée, fonction de temporisation, délai.

La liste suivante décrit les paramètres:

• transition-property: Identifie quelle propriété CSS va modifier, comme la largeur ou la hauteur, comme dans transition-property: width;.

• transition-duration: Définit la valeur en secondes pour que la transition se termine, comme en transition-duration: 5s;.

• transition-timing-function: Spécifie la courbe de vitesse de l'effet. Les valeurs peuvent être linéaires, faciles, faciles, simplifiées, faciles, ou cubiques ( n , n , n >, n ), comme dans cet exemple: transition-timing-function: linear;, ce qui équivaut à cube-bezier (0, 0, 1, 1).

  transition-delay: Détermine le nombre de secondes qui s'écouleront avant le début de l'effet, comme dans le délai de transition: 2s;.

• Dans l'exemple de code suivant, après un délai de 2 secondes, une boîte orange passe progressivement de 100 pixels à 500 pixels de large pendant 5 secondes lorsqu'un visiteur passe la souris sur le conteneur:

div {width: 100px; hauteur: 100px; couleur de fond: # F90; transition: largeur 5s linéaire 2s; -moz-transition: largeur 5s linéaire 2s; / * Firefox 4 * / -webkit-transition: largeur 5s linéaire 2s; / * Safari et Chrome * / -o-transition: largeur 5s linéaire 2s; / * Opera * /} div: hover {largeur: 500px;}