Estou tentando fazer um efeito "fade-in fade-out" usando a transição CSS. Mas não consigo fazer isso funcionar com a imagem de fundo ...
O CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Dê uma olhada: http://jsfiddle.net/AK3La/
css
background
background-image
css-transitions
Nick Zani
fonte
fonte
background-image
não é uma propriedade animável ( w3.org/TR/css3-transitions/#animatable-properties ), portanto, sua solução não é compatível com o padrão.background
, e é isso que deve ser usado (funciona no Chrome para mim). Talvez a especificação (ou impl) tenha mudado desde que a pergunta foi postadaA solução (que encontrei por mim mesmo) é um truque ninja, posso oferecer-lhe duas maneiras:
primeiro você precisa fazer um "contêiner" para o
<img>
, ele conterá os estados normal e de foco ao mesmo tempo:com seletores CSS3 http://jsfiddle.net/eD2zL/1/ (se você usar este, o estado "normal" será o primeiro filho do seu contêiner ou mudará a
nth-child()
ordem)Solução CSS2 http://jsfiddle.net/eD2zL/2/ (as diferenças entre são apenas alguns seletores)
Basicamente, você precisa ocultar o estado "normal" e mostrar seu "foco" quando você passa
e é isso, espero que alguém ache útil.
fonte
Eu descobri uma solução que funcionou para mim ...
Se você tiver um item de lista (ou div) contendo apenas o link, digamos que seja para links sociais em sua página do Facebook, Twitter, etc. e você está usando uma imagem de sprite, você pode fazer isso:
Faça do fundo "li" a sua imagem de botão
Em seguida, transforme a imagem de plano de fundo do link no estado de foco do botão. Adicione também o atributo opacity a isso e defina-o como 0.
Agora tudo que você precisa é "opacidade" em "a: hover" e defina como 1.
Adicione os atributos de transição de opacidade de cada navegador para "a" e "a: hover" para que o css final seja parecido com este:
Se eu expliquei corretamente, isso deve permitir que você tenha um botão de imagem de fundo esmaecido, espero que ajude pelo menos!
fonte
Infelizmente, você não pode usar a transição
background-image
, consulte a lista w3c de propriedades animáveis .Você pode querer fazer alguns truques com
background-position
.fonte
Você pode usar o pseudoelemento para obter o efeito que deseja, como fiz naquele Fiddle .
CSS:
HTML:
fonte
:after
elemento, tente definirwidth
eheight
como em100%
vez deinherit
, 2) se obackground-image
for realmente exibido em primeiro plano , use o índice negativo para o:after
elemento:z-index: -1;
Se você pode usar jQuery, você pode tentar o plugin BgSwitcher para mudar a imagem de fundo com efeitos, é muito fácil de usar.
Por exemplo :
E adicione seu próprio efeito, consulte como adicionar tipos de efeito
fonte
Tente fazer isso, fará com que o plano de fundo animado funcione na web, mas o aplicativo móvel híbrido não funciona
fonte
Considerando que as imagens de fundo não podem ser animadas, criei um pequeno mixin SCSS que permite a transição entre 2 imagens de fundo diferentes usando pseudo seletores antes e depois . Eles estão em diferentes camadas de índice z. O que está à frente começa com opacidade 0 e se torna visível com o cursor do mouse.
Você também pode usar a mesma abordagem para criar animações com gradientes lineares.
scss
Agora você pode simplesmente usá-lo com
Você pode conferir aqui: https://jsfiddle.net/pablosgpacheco/01rmg0qL/
fonte
Se a animação
opacity
não for uma opção, você também pode animarbackground-size
.Por exemplo, usei este CSS para definir um
backgound-image
com um atraso.fonte
.after
em.before
para a imagem de fundo, você deve definir a imagem de fundo para o.before
. Caso contrário, ele simplesmente desaparecerá sem animação.Salam, esta resposta funciona apenas no Chrome, porque o IE e o FF suportam a transição de cores.
Não há necessidade de fazer seus elementos HTML
opacity:0
, pois algumas vezes eles contêm texto, e não há necessidade de dobrar seus elementos !.A questão com link para um exemplo no jsfiddle precisava de uma pequena mudança, que é colocar uma imagem vazia
.title a
como abackground:url(link to an empty image);
mesma que você colocou,.title a:hover
mas torná-la uma imagem vazia, e o código funcionará.Confira https://jsfiddle.net/Tobasi/vv8q9hum/
fonte
Com a postagem inspiradora de Chris aqui:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
Eu consegui pensar nisso:
fonte
Isso pode ser alcançado com maior suporte para vários navegadores do que a resposta aceita usando pseudo-elementos, conforme exemplificado por esta resposta: https://stackoverflow.com/a/19818268/2602816
fonte
Eu estava lutando com isso por um tempo, primeiro usei uma pilha de imagens uma em cima da outra e, a cada três segundos, estava tentando animar para a próxima imagem na pilha e jogando a imagem atual para o final da pilha. Ao mesmo tempo, estava usando animações como mostrado acima. Eu não conseguia fazer isso funcionar pela minha vida.
Você pode usar esta biblioteca que permite ** imagem de fundo com capacidade de apresentação de slides com redimensionamento dinâmico ** usando jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
fonte