CSS Transition Does Not Work on Top Property in Ff

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 Transition doesn't work with top, bottom, left, right

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.

It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

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.

Why is transition property not working in this case?

Transition will never work on display property. It works on properties like width, height, opacity etc.
In your particular case, what you can do is, use height or width to control this animation.
If your sidebar will appear from the left then you will need to set the initial width to 0 and then set the width to the actual width on click. Like this:

.side_nav { 
  width: 0;
  transition: width 1s;
 
  &.open { 
    width: 200px; 
  }
 }

Transition effects Top vs. Bottom in CSS is not working

If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.

Here is the css I changed:

.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}

.featured-banner a:hover {
    top:inherit;
    top: -55px;
}

Finally, a fiddle: Demo

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.

CSS3 Transition not working

Transition is more like an animation.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

So you need to invoke that animation with an action.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htc css hacks.. there may be something overriding your transition!

You should check this out: http://www.w3schools.com/css/css3_transitions.asp

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>

CSS transition not working but property change is working

Thank you all for the help and effort
it was small simple mistake mentioned by skube
I was using display with transition and that is invaild, it disables animation
so I used visible property with transition instead
visibility: hidden;
visibility: visible;
I changed some css properties in order for that to work, here is the css file after the fixes

@charset "utf-8";

body {
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 100%;
}
.pageHeader {
    position: relative;
    display: block;
    width: 960px;
    padding: 0px;
    /* [disabled]margin-top: auto;
*/
    margin-right: auto;
    margin-left: auto;
    /* [disabled]margin-bottom: auto;
*/
    float: none;
}
.pageHeader a {
    text-decoration: none;
    font-size: 1.4em;
    position: absolute;
    float: right;
    bottom: 50px;
}
.homeContent {
    position:relative;
    background: none repeat scroll 0% 0% #FFF;
    padding: 0px;
    margin: 0px auto;
    width: 960px;
    background-color: green;
    z-index: -1;
}

/* Navigation */
/* the nav div blue background color and cyan border top */
.nav {
    width: 100%;
    height: 50px;
    max-height:50px;
    border-top: 4px solid rgb(0,160,170);
    background: rgb(30,87,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */

    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30,87,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
}

.nav ul {
    width: 960px;
    margin: 0px auto;
    border: 0px;
    padding: 0px;
}

.nav ul li {
    margin: 0px;
    border-left: 1px solid gray;
    padding: 0px;
    float: left;
    position: relative;
    list-style: none;
    font-family: amatic-sc;
}

.nav ul li:first-child {
    border-left: 0px;
}

/* buttons/ links */
.nav ul li a {
    height: 20px;
    border: 0px;
    margin: 0px;
    padding: 15px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    display: block;
    text-shadow: 0 1px 1px rgba(251,251,251, .3);
}

.nav ul li a:hover {
    background: rgb(20,155,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(20,155,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149b99', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
    color: #fff;
}
.nav ul li a:active {
    color: #D1D1D1;
}

/* Nav 2nd level*/
.nav ul li ul {
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 100px;
    position: absolute;
    top: 50px;
    left: 2px;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
    max-height: 0px;
}
.nav ul li ul li{
    float: none;
    margin: 0px;
    padding: 0px;
    font-size: 0.8em;
    border: 0px;
    font-color: black;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
    max-height: 0px;
    border-width: 0px;

}
.nav ul li ul li a {
    height: 12px;
    border-left: 1px solid rgb(0,160,170);
    border-right: 1px solid rgb(0,160,170);
    border-collapse:collapse;
    background-color: rgba(255,255,255,0.80);
    margin: 0px;
    padding: 5px;
    color: #000000;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
    z-index: 100;
}
.nav ul li ul li:last-child a{
    border-bottom: 1px solid rgb(0,160,170);}

.nav ul li:hover ul {
    max-height:999px;
    visibility:visible;
}

.nav ul li:hover ul li{
    max-height:999px;}

CSS3 transition doesn't work with display property

display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.

- reference

As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Vendor prefixes omitted due to brevity.)

Here is a working demo. Also here is a similar topic on SO.

#header #button {

  width:200px;

  background:#ddd;

  transition: border-radius .3s ease .15s;

}

#header #button:hover, #header #button > .content {

    border-radius: 0px 0px 7px 7px;

}

#header #button:hover > .content {

  opacity: 1;

  height: 150px;

  padding: 8px;    

}

#header #button > .content {

  opacity:0;

  clear: both;

  height: 0;

  padding: 0 8px;

  overflow: hidden;

  -webkit-transition: all .3s ease .15s;

  -moz-transition: all .3s ease .15s;

  -o-transition: all .3s ease .15s;

  -ms-transition: all .3s ease .15s;

  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;

  -moz-box-shadow: 0px 2px 2px #ddd;

  box-shadow: 0px 2px 2px #ddd;

  background: #FFF;

}

#button > span { display: inline-block; padding: .5em 1em }

<div id="header">

  <div id="button"> <span>This is a Button</span>

    <div class="content">

      This is the Hidden Div

    </div>

  </div>

</div>

---

Related Topics