La propriété animation-direction

Quelques exemples illustrant les différentes valeurs de cette propriété (documentation sur le MDN).

animation-direction: normal


@keyframes anim {
  from { left: 0; }
  to { left: calc(100% - 20px); }
}
div {
  animation-name: anim;
  animation-direction: normal;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

animation-direction: alternate


@keyframes anim {
  from { left: 0; }
  to { left: calc(100% - 20px); }
}
div {
  animation-name: anim;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

animation-direction: reverse


@keyframes anim {
  from { left: 0; }
  to { left: calc(100% - 20px); }
}
div {
  animation-name: anim;
  animation-direction: reverse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

animation-direction: alternate-reverse


@keyframes anim {
  from { left: 0; }
  to { left: calc(100% - 20px); }
}
div {
  animation-name: anim;
  animation-direction: alternate-reverse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Cette page de démonstration est liée à un article du blog Les intégristes : Firefox 16, qu’il y a-t-il pour nous là-dedans ?