CSS3 @keyframe animation direction reverse not a true rewind

The problem I am experiencing is that the animation delay is being applied on the animation event also for the reverse ( but in the beginning rather than at the end )

Is animation-direction:reverse "broken" as with everything else in the web world? Or is there a way around this?

Fiddle:

http://ift.tt/2wfE2x5

div {
  background: red;
  height: 100px;width: 100px;  
  animation-duration: 1000ms;
  animation-fill-mode: both;  
  animation-delay: 2000ms;  
  transform: translateX(150px);
}

div.animate {  
  animation-name:animate;
}

div.reverse {
  animation-direction: reverse;
  background-color:yellow;
}

@keyframes animate {
  100%  {
    height:300px;width:300px;  
  }      
}

As you can see on the fiddle, the delay is applied at the beginning on both directions. You can't do

 0% { animation-delay:2000ms; } 

but has to be applied outside the @keyframes.

I guess that's the way they "intended" it to be, and that it's not part of the @keyframes but that is not really a good one in a real world application.

I guess I could add "30%" initial value rather than a delay, but then I would have to declare a "zero" state and somehow start multiplying all other values somehow and adjust duration to account for that.

Jeeeeeeeezus.