Buonasera a tutti, vorrei capire perchè questa transizione funziona solo con Chrome e non con firefox e neanche con ie, ho provato senza immagini, solo colori e va con tutti e tre i browser ma con le immagini cambia la foto senza fare la transizione


codice:
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
<style> 
    
.obclass0{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img661/2360/Euz6Bx.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute; 
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;    
     }
.obclass1{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img538/6941/ATDxcC.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    
     }    
.obclass2{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img540/9468/yWAbBG.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
     }     
.obclass3{
    width:500px; 
    height:700px;
    background-image: url(http://imageshack.com/a/img913/5056/ExjMZ9.jpg);
    background-repeat: no-repeat; 
    background-attachment: scroll;
    position:absolute;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;     }     
button{
    position:absolute;
     }
    
    </style>
</head>
<body>


<a class="obclass3" href="http://www.link3.html"></a>
<a class="obclass2" href="http://www.link2.html"></a>
<a class="obclass1" href="http://www.link1.html"></a>
<a id="object" class="obclass0"  href="http://www.link0.html"></a>


    <button onclick="toggle()"><h3>clicca</h3></button>


<script>
function toggle() {
       var object=document.getElementById("object");
       if (object.className=="obclass0"){
           object.className="obclass1",
               object.href="http://www.link1.html"}
     else  if (object.className=="obclass1"){
         object.className="obclass2",
             object.href="http://www.link2.html"}
     else  if (object.className=="obclass2"){
         object.className="obclass3",
             object.href="http://www.link3.html"}
     else if (object.className=="obclass3"){
         object.className="obclass0",
             object.href="http://www.link0.html"}
}
</script>


</body>
</html>