Jump to content
Sign in to follow this  
wesleyguirra

Transition não funciona no firefox

Recommended Posts

Olá bom dia à todos estou com o seguinte problema:

Coloquei um transition em algumas divs nesta página:

http://gruporemax.com.br/index2.html

são os 3 botões azuis. no chrome eles funcionam perfeitamente com a transição porém no firefox não tem transição e eu já usei "-moz-transition"



Espero que alguém consiga me ajudar, obrigado.

 

 

html:

 

 

<div class="container-center">
<div class="provisorio" id="areas-de-atuacao"><a href="atuacoes.html">Áreas de atuação  </a></div>
<div class="provisorio" id="nossa-equipe"><a href="sobre.html">    Nossa Equipe        </a></div>
<div class="provisorio" id="trabalhe-conosco"><a href="trabalhe-conosco.html">Trabalhe conosco</a></div>
</div>


meu css:

 

provisorio {
margin: 0 45px;
float: left;
background-image: url(../img/info-release.png);
width: 250px;
height: 95px;
transition: all 0.25s linear 0s;
-moz-transition: all 0.25s linear 0s;
-webkit-transition: all 0.25s linear 0s;
}

.provisorio a {
line-height: 95px;
padding: 35px 29px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-family: 'Raleway','Arial','Helvetica', sans-serif;
font-size: 18px;
}

#areas-de-atuacao:hover {
background-image: url(../img/areas-atuacao.png);
transition: all 0.25s linear 0s;
-moz-transition: all 0.25s linear 0s;
-webkit-transition: all 0.25s linear 0s;
}

#nossa-equipe:hover {
background-image: url(../img/nossa-equip.png);
transition: all 0.25s linear 0s;
-moz-transition: all 0.25s linear 0s;
-webkit-transition: all 0.25s linear 0s;
}

#trabalhe-conosco:hover {
background-image: url(../img/trabalhe-conosco-hover.png);
transition: all 0.25s linear 0s;
-moz-transition: all 0.25s linear 0s;
-webkit-transition: all 0.25s linear 0s;
}

Edited by wesleyguirra

Share this post


Link to post
Share on other sites

Você pode considerar utilizar css sprites para tornar o carregamento da imagem do hover mais rápido.

 

E transition só funciona para transições de valores, e não para troca de backgrounds.

  • +1 1

Share this post


Link to post
Share on other sites

como uso esse tal de css sprites?

 

a entendi é aquele bg com as 3 imagens certo? ou com todas do site?

 

o ruim que eu não sei posicionar bem.

 

será que se eu fizer um sprite somente com a imagens do hover ainda ficará lento?

 

como faço para fazer um transition no bg?

Edited by wesleyguirra

Share this post


Link to post
Share on other sites

@William Bruno, até funciona para background, o problema é que no firefox há um bug registrado justamente para esse caso (https://bugzilla.mozilla.org/show_bug.cgi?id=546052).

Veja aqui (http://codepen.io/marlonlp/pen/bALHu). Funciona normalmente no Chrome, mas nada de FF e IE.

  • +1 1

Share this post


Link to post
Share on other sites

Então cara. Me corrigindo um pouco, acabei de ler a especificação da W3C (http://www.w3.org/TR/css3-transitions/#animatable-properties).

A propriedade background-image não é 'animável', logo não poderia ser aplicada a transição nela.

Funcionar no Chrome está mais para uma feature do navegador do que uma implementação de padrão.

Acredito que você possa implementar algo em JS para ter o efeito em todos os navegadores.

  • +1 1

Share this post


Link to post
Share on other sites

creio que deve haver alguma maneira de fazer isso sem jquery,


ow se possível teria como fazer aquele esquema de mudar a classe né? pelo jquery


como faço para mudar a propriedade do css no caso background image pelo jquery e aplicar este tipo de transição quando o mouse passar pelo elemento?

Edited by wesleyguirra

Share this post


Link to post
Share on other sites

o ruim que eu não sei posicionar bem.

Não posicione! Deixe que um gerador de sprites faça isso por ti: :seta: CSS sprite generators. Recomendo o SpriteCow.

E, apenas se estiver em um nível mais avançado, experimente gerar sprites com um pré-processador como Sass utilizando Compass. Ainda melhor!

 

Quanto ao problema...

 

Tu tens algumas opções:

  • Fazer uma transição com a propriedade opacity
  • Usar JavaScript (com jQuery fica bem fácil)
  • +1 1

Share this post


Link to post
Share on other sites

Obrigado vou dar uma olhada no conteúdo se conseguir eu volto aqui.


eu recomendaria você ver esses dois tipos aqui:

http://css3.bradshawenterprises.com/cfimg/

http://callmenick.com/tutorial-demos/image-overlay-hover-effects/index-2.html

achei muito legais, e também é bem criativo para o trabalho.

 

isso vai me ajudar muito obrigado Sebastiao


 

Não posicione! Deixe que um gerador de sprites faça isso por ti: :seta: CSS sprite generators. Recomendo o SpriteCow.
E, apenas se estiver em um nível mais avançado, experimente gerar sprites com um pré-processador como Sass utilizando Compass. Ainda melhor!

Quanto ao problema...

Tu tens algumas opções:

  • Fazer uma transição com a propriedade opacity
  • Usar JavaScript (com jQuery fica bem fácil)

 

 

 

valeu vou tentar!

Share this post


Link to post
Share on other sites

Percebi que você desenhou essa caixa como imagem.

Mas é possível fazer ela com CSS puro.

 

Assim o carregamento vai ficar ainda mais rápido do que usar sprites.

Edited by Dian Carlos

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.