CSS Transition Doesn't Work in Firefox When Position Is Changed

CSS transition doesn't work in Firefox when position is changed

It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.

$("#button2").on({
    click: function() {
        $("#container").toggleClass("some_state");

        setTimeout(function() {
            $("#container").toggleClass("some_state_position");
        }, 50);
    }
});

It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.

CSS3 transition doesn't work in Firefox, Safari and IE

Can be done with pseudo elements.

.logo {
    background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
    width: 300px;
    height: 300px;
    position: relative;
}
.logo:after {
    content: "";
    opacity: 0;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease; 
}
.logo:hover:after {
    opacity: 1;
}

https://jsfiddle.net/84bvybjs/

Why is my CSS3 Transition not working in Firefox?

It looks like FF wont transition default values. They have to be declared on the original element before it will transition to the new properties.

CSS Transitions not applying in Firefox

Firefox doesn't support background-image transitions as per this link

I am not sure this is going to be helpful to you, but you can give it a try by creating a sprite of all images you want in your slider. Sprite can be a vertical or horizontal. And depending upon the style of sprite, you can then set your background-image with background-position and then in javascript instead of changing the background-image for the div, just change the background-position of main container.

Working Demo

Javascript:

var counter = 45
setInterval(function () {
    $('.container').css('background-position',counter+"px");
    counter += 45;
    if (counter>90) counter = 0;
}, 2500);

HTML:

<div class="container"></div>

CSS:

.container {
    position: relative;
    background-image:url('http://www.w3schools.com/css/img_navsprites.gif');    
    transition: background-position 3.5s ease;
    width:43px;
    height:44px;
    background-position:0 0;
}

Firefox transitions not working

You need to set a starting left for firefox (and now Chrome).

#element1, #element2{
    left: 0px;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s; 
}

You're going to be better off always setting a default value for any transition. That way you can have complete control.

Transition not working in FireFox

There's a bug in Firefox - Bug 625289. It seems that transitions in FF doesn't work when you change element needs to be reconstructed - e.g. it's position is changed.

To fix that simply move position: absolute; and overflow: hidden; from #img #overlay:hover to #img #overlay and it's gonna work in FF!

CSS transition does not work on top property in FF

Browsers don't apply transition on a property if an initial value for it is not specified in the element. Hence, adding top: 0px to ul li will solve the issue.

ul {  list-style: none;  text-align: center;}ul li {  position: relative;  float: right;  margin-right: 20px;  top: 0px; /* this line was added */  width: 30%;}ul li {  transition: all 0.3s;}ul li:hover {  top: -10px;}ul li> a {  color: red;}

<!-- Library included just to avoid prefixes so that users with older browser can view --><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul>  <li>    <a href="#">      <h2>title</h2>    </a>  </li>  <li>    <a href="#">      <h2>title</h2>    </a>  </li>  <li>    <a href="#">      <h2>title</h2>    </a>  </li></ul>

CSS mozilla transition not working

Firefox seems to require an initial value set first. Even if it's 0.

#footer img {
     margin-left:8px;
     -webkit-transition:all .1s ease;
     -moz-transition:all .1s ease;
     -ms-transition:all .1s ease;
     transition:all .1s ease;
     cursor:pointer;
     position:relative;
     top:0;
}

#footer img:hover {
     top:-5px;
}

---

Related Topics