-webkit-box-reflect disappears while transitioning - html

Question

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="https://koktelbolt.shoprenter.hu/custom/koktelbolt/image/data/specials/4.png" />
</div>

Answer 1

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).
just posted an example for understanding
.year {
display: inline-block;
padding: 10px 15px;
cursor: pointer;
text-align: center;
color: #fff;
font-size: 17px;
border-radius: 20px;
background: rgba(5,176,196,1);
background: -webkit-linear-gradient(170deg, #05b0c4, #80ff8f);
background: -o-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
background: -moz-linear-gradient(170deg, 170deg, #05b0c4, #80ff8f);
background: linear-gradient(170deg, #05b0c4, #80ff8f);
transition:all 0.4s linear;
}
.year:hover {
background: rgba(5,176,196,1);
background: -webkit-linear-gradient(170deg, #80ff8f, #05b0c4);
background: -o-linear-gradient(170deg, #80ff8f, #05b0c4);
background: -moz-linear-gradient(170deg, #80ff8f, #05b0c4);
background: linear-gradient(170deg, #80ff8f, #05b0c4);
}
<div class="year">2017</div>
You can use pseudo classes for it
.button {
display: inline-block;
margin-top: 10%;
padding: 1em 2em;
font-size: 2em;
color: #fff;
font-family: arial, sans-serif;
text-decoration: none;
border-radius: 0.3em;
position: relative;
background-color: #ccc;
background-image: linear-gradient(to top, #6d8aa0, #8ba2b4);
-webkit-backface-visibility: hidden;
z-index: 1;
}
.button:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3em;
background-image: linear-gradient(to top, red, blue);
transition: opacity 0.5s ease-out;
z-index: 2;
opacity: 0;
}
.button:hover:after {
opacity: 1;
}
.button span {
position: relative;
z-index: 3;
}
body {
text-align: center;
background: #ddd;
}
<a class="button" href="#"><span>BUTTON</span></a>