Transitions

transition : est la propriété raccourcie, dont sont dérivées les propriétés :

- transition-property: : propriété(s) à animer ;

- transition-duration: : durée de la transition (en s ou ms) ;

- transition-delay: : délai avant de démarrer (en s ou ms) ;

- transition-timing-function: : accélération de la transition. Valeurs : linear (linéaire), ease/ease-out (rapide puis lent), ease-in (lent puis rapide), ease-in-out (lent-rapide-lent), cubic-Bezier.

Les propriétés concernées par les transitions sont toutes celles qui peuvent être définies par une valeur numérique  : width, height, min/max-width, min/max-height, position, margin, padding, mais aussi background, opacity, font-weight, text-shadow, color, line-height, vertical-align, letter-spacing, visibility, z-index, etc.

Exemple :

#nav a {transition : all 0.5s ease-in ;}

Compatibilité

Firefox

4.0+

Chrome

10.0+

Safari

3.2+

Opera

10.6+

IE

10.0+

Animations

animation : est la propriété raccourcie, dont sont dérivées les propriétés :

- animation-name : nom de l'animation ;

- animation-duration : durée totale ;

- animation-delay : attente avant le début de l'animation ;

- animation-iteration-count : nombre d'itérations ;

- animation-timing-function : accélération (voir Transitions)  ;

- animation-direction : sens de l'animation (normal ou alternate).

Exemple :

@keyframes disparition {

0% {opacity : 1 ;}  /* opacité complète * /

50% {opacity : 0 ;}  /* opacité nulle à la moitié de l'animation * /

100% {opacity : 1 ;}  /* retour à l'état initial * /}

img {animation : disparition 2s infinite ;}

Compatibilité

Firefox

5.0+

Chrome

10.0+

Safari

4.0+

Opera

non

IE

non