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>