Guide de référence pratique sur les CSS 3 et leurs propriétés à l'usage des designers ou développeurs Web. ©Electre 2024

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