在css3中从下到上创建灰度效果

Question

我需要用CSS制作一张从灰度到rgba的图片。我知道我可以用CSS3来改变它，但是我需要一个流畅的动画。我需要填充颜色从下到上的动画。我正在附上一张图片，以表明这一点。

​

​

请检查一下这个小提琴，这是我到目前为止所做的。

：

<img src="http://static.wallpedes.com/wallpaper/resolution/resolution-of-wallpaper-pictures-with-green-eyes-hd-best-girls-full-hd-wallpapers-wallpaper-site-for-mobile-android-download-facebook-2012-app-in-the-world.jpg"/>

CSS：

img {
  -webkit-animation: mymove 5s;
  -moz-animation: mymove 5s;
  -ms-animation: mymove 5s;
  animation: mymove 5s;
  width: 400px;
}
@-webkit-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-moz-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-ms-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

提前谢谢。

Answer 1

试试这个css解决方案：

​

img.gray { 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}
.box {
  width: 350px;
  height: 200px;
  position: relative;
}
img {
  width: 350px;
  height: 200px;
  position: absolute;
  bottom: 0;
}
.box-color {
  overflow: hidden;
  width: 350px;
  position: absolute;
  height: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: height 2s; 
  transition: height 2s;
  z-index: 1;
}
.box:hover .box-color {
  height: 100%;
}

<div class="box">
  <div class="box-color">
    <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="color" />
    </div>
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="gray" />
</div>

​