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

我需要用CSS从灰度到rgba制作一张图片。我知道我可以用CSS3改变它，但是我需要一个平滑的动画。我需要用动画从下到上填充颜色。我附上一个图像，使它清楚

请检查这个，这是我到目前为止所做的

HTML：

<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"/>

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

提前感谢。

尝试此css解决方案：

img.gray{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
}
.盒子{
宽度：350px；
高度：200px；
位置：相对位置；
}
img{
宽度：350px；
高度：200px；
位置：绝对位置；
底部：0；
}
.盒子颜色{
溢出：隐藏；
宽度：350px；
位置：绝对位置；
身高：0；
左：0；
底部：0；
-webkit转换：高度2s；
过渡：高度2s；
z指数：1；
}
.box:悬停.box颜色{
身高：100%；
}

你忘了小提琴链接对不起，我已经更新了。。。