Mémento CSS 3 (Broché)

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