3

Estou tentando causar um efeito (sem sucesso) de esmaecer a imagem usando o seguinte código:

@-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">

2
  • Mas você quer esmaecer quando?! Após clicar? Passar o mouse por cima?ou naturalmente ao abrir a imagem?
    – viana
    11/09/2017 às 11:26
  • Quero que fique naturalmente...@acklay 11/09/2017 às 18:53

1 Resposta 1

4

Seu código esta faltando uma chave:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .