Fondu de l'image d'arrière-plan du gris à la couleur après le chargement d'une page

Question

J'essaie d'obtenir un effet d'arrière-plan fondu (une fois) à partir de l'échelle de gris à la couleur après le chargement de la page. Je suis venu avec, mais ne fonctionne pas:

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

} 

et html:

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

Je suis en train de réaliser quelque chose comme ceci: link here.

Voici jsfiddle

Merci

Answer 1

Mise à jour:

Vous pouvez avoir une mise en page différente pour votre image lorsque vous êtes dans un mobile ou une tablette de sorte que vous pouvez ajouter cette requête média à la fin du document CSS.

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

Ainsi, la nouvelle classe CSS img remplacera l'ancien lorsque la largeur de l'écran est inférieure à 768px.

Note: S'il vous plaît jouer avec ce CSS pour répondre à vos besoins. Mais cette requête fonctionne pour les mobiles et les tablettes et n'a besoin que d'ajustements mineurs!

Old Réponse:

Au lieu d'utiliser background-image qui ne peut pas être utilisé avec le CSS ci-dessus essayer une image fixe positionnée pour votre page au lieu qui fait essentiellement la même chose. Voici le code pour le faire.

Remarque: Le positionnement de l'image doit être ajusté en fonction de vos besoins. Comme vous pouvez avoir height:100%;width:auto ou height:auto;width:100%, cela doit être modifié selon vos besoins.

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>