Run keyframe then reverse it infinite times

Question

Is it possible to run a keyframe on an element, then when the keyframe reaches 100% it reverses and goes back down to 0% instead of re running it starting at 0%?

Heres an example: I want it to go up to black then fade back down to white instead of starting over at white

div {
  height: 100px;
  width: 100px;
  background-color: #fff;
  animation-name: colorFade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}


@keyframes colorFade {
  0%   {background-color: #ffffff;}
  10%  {background-color: #e5e5e5;}
  20%  {background-color: #cccccc;}
  30%  {background-color: #b2b2b2;}
  40%  {background-color: #999999;}
  50%  {background-color: #7f7f7f;}
  60%  {background-color: #666666;}
  70%  {background-color: #4c4c4c;}
  80%  {background-color: #333333;}
  90%  {background-color: #191919;}
  100%  {background-color: #191919;}
}

<div></div>

Answer 1

There is animation-direction property to do that:

animation-direction: alternate;

But be aware that some time ago it was not supported in some browsers, so that's possible, that it would be more crossbrowser if you update the animation itself.

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: #fff;
  animation: colorFade 3s infinite ease-out alternate;
}

div + div {
  animation: colorFade2 6s infinite ease-out;
}

@keyframes colorFade {
    0%   {background-color: #ffffff;}
   10%   {background-color: #e5e5e5;}
   20%   {background-color: #cccccc;}
   30%   {background-color: #b2b2b2;}
   40%   {background-color: #999999;}
   50%   {background-color: #7f7f7f;}
   60%   {background-color: #666666;}
   70%   {background-color: #4c4c4c;}
   80%   {background-color: #333333;}
   90%   {background-color: #191919;}
  100%   {background-color: #191919;}
}

@keyframes colorFade2 {
    0%   {background-color: #ffffff;}
    5%   {background-color: #e5e5e5;}
   10%   {background-color: #cccccc;}
   15%   {background-color: #b2b2b2;}
   20%   {background-color: #999999;}
   25%   {background-color: #7f7f7f;}
   30%   {background-color: #666666;}
   35%   {background-color: #4c4c4c;}
   40%   {background-color: #333333;}
   45%   {background-color: #191919;}
   50%   {background-color: #191919;}
   55%   {background-color: #191919;}
   60%   {background-color: #333333;}
   65%   {background-color: #4c4c4c;}
   70%   {background-color: #666666;}
   75%   {background-color: #7f7f7f;}
   80%   {background-color: #999999;}
   85%   {background-color: #b2b2b2;}
   90%   {background-color: #cccccc;}
   95%   {background-color: #e5e5e5;}
  100%   {background-color: #ffffff;}
}

<div></div>
<div></div>