-webkit-box-reflect在转换时消失

Question

我正在为此寻找解决方案： 当图像开始转换时，它会失去反射直到结束，当它返回时。

我错过了什么？谢谢！

＆＃13;

＆＃13;

.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)));
}

＆＃13;

<div class="specials-box">
  <img class="special-img" src="https://koktelbolt.shoprenter.hu/custom/koktelbolt/image/data/specials/4.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

渐变不支持过渡（尽管当前的规范说它们应该支持像渐变一样通过插值来实现渐变过渡。）。 刚刚发布了一个理解的例子

＆＃13;

＆＃13;

        .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);
    }

＆＃13;

<div class="year">2017</div>

＆＃13;

＆＃13;

＆＃13;

你可以使用伪类

＆＃13;

＆＃13;

.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;
}

＆＃13;

<a class="button" href="#"><span>BUTTON</span></a>

＆＃13;

＆＃13;

＆＃13;