html - 运行关键帧然后无限次反转它

Question

是否可以在元素上运行关键帧，然后当关键帧达到 100% 时，它会反转并返回到 0%，而不是从 0% 开始重新运行它？

举个例子:我想让它先变黑然后变回白色，而不是从白色开始

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

animation-direction 属性可以做到这一点:

animation-direction: alternate;

但请注意，前段时间某些浏览器不支持它，所以这是可能的，如果您更新动画本身，它会更跨浏览器。

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>