title: Create gray scale effect starting from bottom to top in css3
body: <p>I need to make a picture from gray scale to rgba with CSS. I know I can change it with CSS3, But I need a smooth animation there. I need to fill the color from bottom to top with an animation. I am attaching an image to make it clear.</p>
  
  <p><img src="https://i.stack.imgur.com/5mMHq.jpg" alt="gradual gray scale model"></p>
  
  <p>Please check this <a href="http://jsfiddle.net/ys3f7912/" rel="nofollow noreferrer">fiddle</a>, this is what I did so far.</p>
  
  <p><strong>HTML</strong>: </p>
  
  <pre><code>&lt;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"/&gt;
  </code></pre>
  
  <p><strong>CSS</strong>: </p>
  
  <pre><code>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%);
    }
  }
  </code></pre>
  
  <p>Thanks in advance.</p>