Fade effect with CSS3

Question

Fade effect with CSS3

Navigation

#1 by (4 votes)

3

I'm trying to cause an (unsuccessful) effect of fading 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

asked by anonymous 11.09.2017 / 11:49

1 answer

How to perform a Count in several columns? Reading XML in C #

score 4 · Answer 1

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