CSS transition going backwards/reverse

问题

I'm wondering if is there any way to use the same CSS transition instance to both move it forward and then backwards/reverse. For example, lets say I have this transition:

@-webkit-keyframes fade-transition {
    from { opacity: 0; }
    to { opacity: 1; }
}

And two runners for this transition. One does the fade in and the other does the fade out:

.fade-in {
    -webkit-animation: fade-transition .2s linear backwards;
}

.fade-out {
    -webkit-animation: fade-transition .2s linear forwards;
}

What I want to accomplish is to use the same transition to do both the fade in and the fade out but the way I'm doing it doesn't work.

Here is the example on JSBin.

回答1:

Use percentage instead of from and to

@-webkit-keyframes fade-transition {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

You can iterate this number of times you want or just set it to infinite

来源：https://stackoverflow.com/questions/14821343/css-transition-going-backwards-reverse