Reverse CSS @keyframes animation, WITHOUT JavaScript. At all. Possible?

What is annoying me is that when you define @keyframes, to do the opposite/reverse you have declare the thing twice!

Sure, transitions reverse themselves but then you have the problem with initial state.

See this example:

.class {
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
   animation-fill-mode: both;
   animation-name: slideInLeft;
}

.class:hover, .class.hide {
  // F*****G reverse and retrigger the keyframe animation
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0%, 0%);

    }
    to {
        transform: translate3d(0%, 0%, 0%);
    }
}

Rather than also being forced to do:

@keyframes slideOutLeft {
    from {
        transform: translate3d(0%, 0%, 0%);
    }
    to {
        transform: translate3d(-100%, 0%, 0%);
    }
}

I would like to say that on:

.class:hover, .class.hide { 
       // REVERSE THE slideInLeft animation without using slideOutLeft: 

       animation-name: slideOutLeft;

       // Rather I would like to say

      animation-name:slideInLeft ; // the same as .class really

      // but 
      animation-direction:reverse; 
      animation-fill-mode:backwards; 

      // do not work because they don't retrigger the animation if it has the same name. Only if I change the name and declare a totally new keyframe can I do what I want. 
}

Meaning I'm not interested in repeating the declaration, which is just the opposite of slideInLeft.

For complex animations, this is extremely annoying to do.