在css3中創建從下到上的灰度效果

Question

我需要使用CSS製作灰度到rgba的圖片。我知道我可以用CSS3改變它，但我需要一個平滑的動畫。我需要用動畫從底部到頂部填充顏色。我附上一張圖片來說明問題。

請檢查該fiddle，這是我做的那麼遠。

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

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>