Question

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

下面是一个例子：我想要它变黑然后淡化为白色而不是从白色开始

＆＃13;

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;}
}

＆＃13;

<div></div>

＆＃13;

Answer 1

有animation-direction属性可以做到：

animation-direction: alternate;

但请注意，前段时间它在某些浏览器中不受支持，所以如果更新动画本身，它会更加交叉浏览器。

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

Answer 2

发现它，我所要做的就是

-webkit-animation-direction: alternate-reverse;

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

2 个答案: