Firefox Transitions Not Working

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.

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 Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.

This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.

var element = document.querySelector(".element")var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {  element.classList.toggle("active");});

.element{  opacity: 0;  visibility: hidden;  transition: opacity 500ms ease, visibility 500ms ease;}
.element.active{  opacity: 1;  visibility: visible;}

<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>

Transition not working on Firefox

If you are using css3 with vendor prefixes you need to add the actual css3 equivalent also, not just the prefixes, they were a stop gap while standards were being adopted.

The latest Firefox has adopted css3 as the standard (No prefixes and no support for them), but the prefixes still support older versions, so it is not wrong to use them but they are only a fall back.

<style type="text/css" media="screen">
.class1 {visibility: visible}
.class2 {
    background: red; 
    background-repeat: no-repeat; 
    -webkit-transition:all .9s ease; 
    -moz-transition:all .9s ease; 
    -o-transition:all .9s ease; 
    transition:all .9s ease; 
    height: 173px}
.class1:hover .class2 {
    background:yellow; 
    background-repeat: no-repeat; 
    -webkit-transition:all .7s ease; 
    -moz-transition:all .7s ease; 
    -o-transition:all .7s ease; 
    transition:all .7s ease; 
    height: 173px
    }
</style>

<div class="class1" style="width: 280px; float:left;"><p style="float:center<class="class2">HJKHKSF</p></div>

I took the images out and used colours.

No further comment: After a little research it appears firefox does not support transition animation on background-images

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

Transitions on pseudo-elements not working on firefox browser

This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.

Working Example:

#nav {       height:60px;    background-color:#FFFFFF;    overflow:hidden;}
#nav ul {    color: #f2f2f2;    margin-top:20px;    list-style-type: none;    text-align: center;    float:left;}
#nav ul li{    display: inline-block;    *display: inline;    zoom: 1;    margin: 0 10px;   }
#nav ul li a {    color: #8198A0;    font-style: normal;    font-size: 14px;    font-weight: 500;    letter-spacing: 0.25px;    text-transform: uppercase;    text-decoration: none;    display: inline-block;    -webkit-transition: color 0.5s ease;    -moz-transition: color 0.5s ease;    -o-transition: color 0.5s ease;    transition: color 0.5s ease;}
#nav ul li a:after {    margin-top:16px;    content: "";    display: block;    height: 5px;    width: 0;    -webkit-transition: width 0.5s ease, background-color 0.5s ease;    -moz-transition: width 0.5s ease, background-color 0.5s ease;    -o-transition: width 0.5s ease, background-color 0.5s ease;    transition: width 0.5s ease, background-color 0.5s ease;    pointer-events:none;}
#nav ul li a:hover:after {    width: 100%;    background-color:#8198A0;}
#nav ul li a:hover{    cursor: pointer;}

<div id="nav">    <ul>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>        <li><a>ENTRY</a></li>    </ul></div>

CSS3 transition (transform) not working in Firefox, but in Chrome and Safari

For everybody, who has the same problem: It's a bug in Firefox, see: https://bugzilla.mozilla.org/show_bug.cgi?id=625289

---

Related Topics