css3 - CSS transition going backwards/reverse -

css3 - CSS transition going backwards/reverse -

i'm wondering if there way utilize same css transition instance both move forwards , backwards/reverse. example, lets have transition:

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

and 2 runners transition. 1 fade in , other fade out:

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

what want accomplish utilize same transition both fade in , fade out way i'm doing doesn't work.

here illustration on jsbin.

use percentage instead of from , to

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

you can iterate number of times want or set infinite

css css3 animation transition