Fading background image from grey to colour after loading a page

I am trying to get an effect of fading background (once) from greyscale to colour after page is loaded up. I came up with this, but doesn't work:

<style>
    body {
        background: #ffffff url('http://www.itgeared.com/images/content/1481-1.jpg') no-repeat top;
        background-attachment: fixed; 
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;            
    }    
    .content {height:2000px;}

@keyframes filter-animation {
   0% ,75%{
   filter: grayscale(1);
}

 100% {
  filter: grayscale(0);
  }

}


@-webkit-keyframes filter-animation {
 0%, 75% {
   -webkit-filter: grayscale(1);
 }

 100% {
   -webkit-filter: grayscale(0);
 }

}   

and html:

<div class="content">
    . <br/>. <br/>. <br/>. <br/>
</div>

I'm trying to achieve something like this: link here.

Here is jsfiddle

Thanks

Update:

You may want to have a different layout for your image when you are in a mobile or tablet so you can add this media query at the end of the CSS document.

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
    .img {
        position: fixed;
        width: auto;
        height:80%;
        animation: filter-animation 8s;
        -webkit-animation: filter-animation 8s;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

So the new CSS class img will override the old one when the width of the screen is less than 768px.

Note: Please play around with this CSS to suit your need. But this query works for mobile and tablets and just needs minor tweaking!

Old Answer:

Instead of using background-image which cannot be used with the above CSS try an fixed positioned image for your page instead which basically does the same thing. Here is the code for doing it.

Note: Positioning the image needs to be adjusted to suit your requirement. like you can have either height:100%;width:auto or height:auto;width:100%, this needs to be tweaked as per your need.

html,
body {
  height: auto;
  width: 100%;
  margin: 0px;
}

.img {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  animation: filter-animation 8s;
  -webkit-animation: filter-animation 8s;
}

.content {
  height: 2000px;
}

@keyframes filter-animation {
  0%,
  75% {
    filter: grayscale(1);
  }
  100% {
    filter: grayscale(0);
  }
}

@-webkit-keyframes filter-animation {
  0%,
  75% {
    -webkit-filter: grayscale(1);
  }
  100% {
    -webkit-filter: grayscale(0);
  }
}

<img class="img" src="http://www.itgeared.com/images/content/1481-1.jpg" />
<div class="content">
  .
  <br/>.
  <br/>.
  <br/>.
  <br/>
</div>