Animation

La propriété animation de CSS peut être utilisée pour animer d’autres propriétés CSS telles que color, background-color, height ou width. Chaque animation doit être définie au moyen de l’at-rule keyframes qui est ensuite appelée avec la propriété animation de la façon suivante :

//CSS
.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen.

chaque règle @keyframes définit ce qui doit se passer à des moments spécifiés de l’animation. Par exemple, 0% représente le début de l’animation et 100% la fin. Ces keyframes peuvent être contrôlés soit par la propriété animation soit par ses huit sous-propriétés, pour donner plus de contrôle sur la façon dont les keyframes doivent être manipulées.

Sous-propriétés de keyframes

  • animation-name : déclare le nom de la règle @keyframes à manipuler.
  • animation-duration : la durée que prend l’animation pour réaliser un cycle complet.
  • animation-timing-fonction : définit des courbes d’accélérations préréglées telles que ease et linear.
  • animation-delay : définit le retard, c’est à dire temps devant s’écouler entre le moment où l’animation est chargée et le moment où elle démarre.
  • animation-direction : définit la direction de l’animation à la fin du cycle. Par défaut, elle se réinitialise à la fin de chaque cycle.
  • animation-iteration-count : le nombre de fois que l’animation doit être exécutée.
  • animation-fill-mode : définit les valeurs à appliquer avant/après l’animation. Par exemple, vous pouvez décider que le dernier état de l’animation doit rester à l’écran, ou bien décider qu’elle doit revenir à son état initial.
  • animation-play-state : pause/play l’animation.

Ces sous-propriétés peuvent être utilisées ainsi :

//CSS
@keyframes stretch {
  /* déclarez ici le contenu de votre animation */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

Cette déclaration est identique à la suivante :

//CSS
.element {
  animation: 
    stretch
    1.5s
    ease-out
    0
    alternate
    infinite
    none
    running;
}

See the Pen EjaJNd by CSS-Tricks (@css-tricks) on CodePen.

Voici la liste des valeurs que chacune de ces propriétés peut prendre :

animation-timing-function : ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))

animation-duration : Xs ou Xms ( x secondes ou x millisecondes)

animation-delay : Xs ou Xms ( x secondes ou x millisecondes)

animation-iteration-count : X

animation-fill-mode : forwards, backwards, both, none

animation-direction : normal, alternate

animation-play-state : paused, running, running

Animation par pas

Si une animation a les mêmes propriétés de début et de fin, on peut le spécifier en séparant les valeurs 0% et 100% par une virgule :

//CSS
@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

Animations multiples

On peut séparer les valeurs par une virgule pour déclarer des animations multiples sur un sélecteur. Dans l’exemple qui suit, nous voulons modifier la couleur du cercle dans une @keyframe (pulse) tout en le balançant d’un côté à l’autre avec une autre @keyframe (nudge) — vous pouvez consulter le code complet dans le codepen :

//CSS
.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

See the Pen jPPWpY by Pierre Choffe (@pierrechoffe) on CodePen.

Performance

L’animation de la plupart des propriétés pose des problèmes de performance, il faut donc être prudent avant de se lancer dans l’animation à tout crin. Toutefois, certaines combinaisons peuvent être animées sans souci :

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Quelles propriétés peuvent être animées?

MDN maintient une liste des propriétés animables, essentiellement celles ayant des composantes couleurs ou numériques (nombre, longueur, pourcentage).


À lire également dans La Cascade :

CSS animation, une introduction, par Rachel Cope

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

Liste des articles consacrés aux animations dans la Cascade

articles en anglais :

High performance animations, par Paul Lewis et Paul Irish


Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.