Collection(s) : Mémento
Paru le 08/09/2011
Professionnels
Transitions
transition : est la propriété raccourcie, dont sont dérivées les propriétés :
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 :
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