Pela minha experiência e por essa outra resposta aqui, não é possível fazer fade de opacidade entre dois background-image
utilizando apenas CSS3.
O que você teria que fazer, seria criar dois elementos sobrepostos, com background-image
diferentes, e animar suas respectivas opacity
via CSS3 Animation.
Se quiser mesmo fazer em JavaScript, esse código aqui serve de exemplo, não utiliza nenhuma funcionalidade muito nova, e funciona no Chrome, Firefox e até no IE9:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
<style type="text/css">
.container, .botao {
font: normal 16px tahoma;
text-align:center;
width: 150px;
height: 40px;
color:#FFF;
cursor: pointer;
display: inline-block;
vertical-align: bottom;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container {
position: relative;
}
.botao {
padding:10px;
position: absolute;
left: 0px;
top: 0px;
}
.frente {
background: url(https://i.sstatic.net/5PWNy.png) 0 -100px;
z-index: 1;
}
.tras {
background: url(https://i.sstatic.net/5PWNy.png) 0 -150px;
z-index: 0;
}
.container:active .tras {
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
}
</style>
</head>
<body>
<span>Botão 1:</span>
<div class="container">
<div class="botao frente" style="opacity: 1;" id="el1">TESTE</div>
<div class="botao tras">TESTE</div>
</div>
<span>Botão 2:</span>
<div class="container">
<div class="botao frente" style="opacity: 1;" id="el2">TESTE 2</div>
<div class="botao tras">TESTE 2</div>
</div>
<script type="text/javascript">
function buttonMouseChanged(fadingIn) {
//Trabalhando com o Closure a nosso favor ;)
var _this = this, animate;
animate = function () {
var o = parseFloat(_this.style.opacity);
if (_this.fadingIn) {
o += 0.05;
if (o < 1)
setTimeout(animate, 1000 / 60);
else
o = 1;
} else {
o -= 0.05;
if (o > 0)
setTimeout(animate, 1000 / 60);
else
o = 0;
}
_this.style.opacity = o;
};
this.fadingIn = fadingIn;
setTimeout(animate, 1000 / 60);
}
function buttonMouseEnter() {
buttonMouseChanged.call(this, false);
}
function buttonMouseLeave() {
buttonMouseChanged.call(this, true);
}
function prepareButton(id) {
var btn = document.getElementById(id);
btn.onmouseenter = buttonMouseEnter;
btn.onmouseleave = buttonMouseLeave;
}
prepareButton("el1");
prepareButton("el2");
</script>
</body>
</html>
Repare como o valor da opacity
de el1
, e de el2
, começa definido como 1, para poder fazer o parseFloat()
funcionar sempre.
Para fazer a animação melhorar um pouco, seria interessante não utilizar um valor fixo (como 0.05) para somar e subtrair do opacity
, mas um valor proporcional ao tempo decorrido desde a última execução da função animate()
.