Transition não funciona no firefox

[wesleyguirra 0]

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

[William Bruno 1501]

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.

[wesleyguirra 0]

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?

[Marlon Pacheco 132]

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

[wesleyguirra 0]

Marlon tem alguma maneira de fazer isso funcionar no firefox?

[Marlon Pacheco 132]

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.

[wesleyguirra 0]

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?

[Sebastiao Marcos 3]

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.

[Diéssica 140]

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)

[wesleyguirra 0]

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!

[Dian Carlos 29]

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.