How to animate from right to left in CSS?

Question

css

There are 5 boxes now, in the example their backrgound-color is animated from left to right. How to animate so that backgrounds fill from right to left? Played with animation-direction- did not help.

link to sandbox

Answer 1

Change delay from 0.1-05s blocks to .05-0.1s

.{
  animation-delay: 0.5s;
}

.box_2 {
  animation-delay: 0.4s;
}

.box_3 {
  animation-delay: 0.3s;
}

.box_4 {
  animation-delay: 0.2s;
}

.box_5 {
  animation-delay: 0.1s;
}