Fade effect with CSS3

Asked

Viewed 712 times

3

I am trying to cause an effect (unsuccessfully) to fade the image using the following code:

@-webkit-keyframes fundo {    
    10%{
		-webkit-filter: grayscale(10%);
		-moz-filter: grayscale(10%);
		-ms-filter: grayscale(10%);
		-o-filter: grayscale(10%);
		filter: grayscale(10%);
		}     
   50%{      
		-webkit-filter: grayscale(50%);
		-moz-filter: grayscale(50%);
		-ms-filter: grayscale(50%);
		-o-filter: grayscale(50%);
		filter: grayscale(50%);
		}
   
   100%{
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		  }
img{
	-webkit-filter: fundo .5s infinite;
	-moz-filter: fundo .5s infinite;
	-ms-filter:	fundo .5s infinite;
	-o-filter: fundo .5s infinite;
	filter: fundo .5s infinite;
}
<img src="https://lorempixel.com/580/250/nature/1">

css3 webkit

  • But you want to fade when?! After clicking? Hover over? or naturally when opening the image?

  • I want it to stay natural...

1 answer

4

Your code is missing a key:

@-webkit-keyframes fundo {    
    10%{
        -webkit-filter: grayscale(10%);
        -moz-filter: grayscale(10%);
        -ms-filter: grayscale(10%);
        -o-filter: grayscale(10%);
        filter: grayscale(10%);
        }     
   50%{      
        -webkit-filter: grayscale(50%);
        -moz-filter: grayscale(50%);
        -ms-filter: grayscale(50%);
        -o-filter: grayscale(50%);
        filter: grayscale(50%);
        }

   100%{
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
          }
}
img{
    -webkit-filter: fundo .5s infinite;
    -moz-filter: fundo .5s infinite;
    -ms-filter: fundo .5s infinite;
    -o-filter: fundo .5s infinite;
    filter: fundo .5s infinite;
}

Browser other questions tagged css3 webkit

You are not signed in. Login or sign up in order to post.