Keyframe ausführen und dann unendlich rückwärts umkehren

Question

Ist es möglich, einen Keyframe für ein Element auszuführen, wenn der Keyframe 100% erreicht, kehrt er um und geht wieder auf 0% zurück anstatt ihn ab 0% zu starten?

Heres ein Beispiel: Ich will es dann zu schwarz gehen verblassen wieder auf weiß statt vorne beginnen am weißen

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

Es gibt animation-direction Eigenschaft, das zu tun:

animation-direction: alternate; 

aber bewusst sein, dass es vor einiger Zeit nicht in einigen Browsern unterstützt wurde, so dass möglich ist, dass es mehr cross wäre, wenn Sie die Animation selbst aktualisieren.

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>

Answer 2

gefunden, alles, was ich tun musste, war

-webkit-animation-direction: alternate-reverse;