Les transitions en CSS3

Qu'est-ce qu'une transition ? Il suffit de l'essayer pour le savoir... passer votre souris.

Modification de la largeur d'une div :

 

Modification de la couleur :

effet sans transition effet avec transition

 

Entrons dans le vif du Sujet

I Que dit le W3C

RéférenceW3C
http://bkaprt.com/css3/3/

Les transitions CSS permettent aux changements de la valeur d'une propriété CSS de se produire progressivement sur une durée spécifiée.

II Compatibilité

mais pas pour 9, à voir au cas par cas pour 10+

III Quelques éléments de syntaxe

L'allongement de notre rectangle rouge en introduction est ordonné par l'instruction CSS suivante :

Cette syntaxe est la syntaxe raccourcie, on peut spécifier ligne après ligne transition-property, transition-timing-function, transition-duration.

Cette description de la transition est ajoutée à la description css de l'élément dans son état intial :

IV Une syntaxe détaillée avec ses préfixes

Exemple

V Ecriture condensée pour une transition sur 2 propriétés à la fois

Exemple

VI Transition pour toutes les propriétés potentielles : all

Exemple

VI Quelques classiques de présentation pour les pratiquants avancés

1 - L'effet zoom

Il faut agir sur la propriété scale : a:hover { transform:  scale(1.2);}

2 - L'effet "TakeOff"

Il faut agir sur la propriété top en position relative :

3 - Légende coulissante

Lorem ipsum dolorsit amet
Hôtel des monnaies
Lorem ipsum dolorsit amet
Université des meilleurs
Lorem ipsum dolorsit amet
ma République

4 - Animation d'un menu (Raphael Goetter http://codepen.io/raphaelgoetter/pen/qEObar)

nav a:hover, nav a:focus { flex:  2; }

VI Quelles sont les propriétés compatibles avec une transition ?

La liste des propriétés compatibles avec une transition est fournie par le W3C à l'adresse :
http://www.w3.org/TR/css3-transitions/#properties-from-css-

Représentant
de la catégorie
Propriétés Dimension interpolée
color background-color, border-color, outline-color, color color
height, width

height, width, border-width,outline-width
max-height, max-width, min-height, min-width,

length, percentage
background-position background-position percentage, length
top top, right, left, bottom length, percentage
margin-top

margin-top, margin-left,margin-right, margin-bottom,
padding-top, padding-left,padding-right, padding-bottom,

length
text-indent text-indent, word-spacing length, percentage
background-image   only gradients
border-spacing   length
crop   rectangle
font-size   length, percentage
font-weight   number
grid-*   various
letter-spacing   length
line-height   number, length, percentage
opacity   number
outline-offset   integer
text-shadow   shadow
vertical-align   keywords, length, percentage
visibility   visibility
z-index   integer
zoom   number

 

Références

http://css3.bradshawenterprises.com/transitions/

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Vous devez :

On jouera sur l'épaisseur de la bordure inférieur passa de 1px à 20px.

Un dernier exercice, le menu détaillé :