Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Propriétés: animation

Maj: novembre 2011

Les animations CSS font partie du CSS Animation Module Level 3. Les Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps, tel un scénario Flash.

Comment déclarer une animation ?

Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100%.

@keyframes nomAnim{
    from { color:blue; }
    35%  { color:green; }
    to   { color:red; }
}

Utiliser cette animation

La propriété se décompose en plusieurs autres propriétés, décrite ici :

  • animation-name : le nom de l’animation à utiliser.
  • animation-duration : le temps total de l’animation en secondes.
  • animation-timing-function : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier
  • animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite permet de jouer une animation en continu.
  • animation-direction : permet de jouer une animation en sens inverse les cycles pairs si alternate est choisi.
  • animation-play-state : en cours d’étude de suppression par le W3C.
  • animation-delay : le temps en secondes avant que l’animation ne démarre.

Il existe aussi la propriété raccourcie animation.

Voici un exemple qui utilise l’animation créée ci-dessus. Cette animation durera 5 secondes avec un delay de 2 secondes et utilise une méthode linear, c’est à dire sans accélération, ni décélération.

    animation:nomAnim 5s linear 2s;

PS:les animations CSS3 ne sont compatible qu’avec Chrome, Safari, Firefox et Internet Explorer (v10). Cependant, pour pouvoir les utiliser, il faut préfixer toutes les règles avec -webkit, -moz- ou -ms-. Par exemple, @keyframes devient @-webkit-keyframes, @-moz-keyframes ou @-ms-keyframes, animation devient -webkit-animation, -moz-animation ou -ms-animation.