-webkit-box-reflect disappears while transitioning

I'm looking for a solution for this: When the image starting the transition it loses the reflection till the end, when it comes back.

What am I missing? Thanks!

.specials-box {
    width: 330px;
    margin: 50px 0;
    height: 500px;
    position: relative;
    cursor: pointer;
}

.special-img {
        width: 80%;
    position: absolute;
    top: 20px;
    left: 10%;
        transition: all 0.3s ease-in-out;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));
  transition: all 0.3s ease-in-out;
  filter: grayscale(100%);
}

.specials-box:hover .special-img {
  filter: grayscale(0%);
  top:0;
  transition: all 0.3s ease-in-out;
  -webkit-box-reflect: below 25px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));
}

<div class="specials-box">
  <img class="special-img" src="http://ift.tt/2rAA17t" />
</div>