11

I have following HTML:

<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

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

The question is the transition does not work with moz, it works on webkit. How do I implement this in a cross browser way?

DEMO

Harry
  • 87,580
  • 25
  • 202
  • 214
It worked yesterday.
  • 4,507
  • 11
  • 46
  • 81

4 Answers4

17

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>

Note: I would also suggest using the same option (transform) as mentioned in Mr_Green's answer.

Harry
  • 87,580
  • 25
  • 202
  • 214
4

I don't know why top css property is acting weird to do animation in firefox even it is listed as animation behaviour property in css.

Anyway, using margin-top instead of top is working fine in Firefox.

But I would like to suggest going with transform's "translateX" and "translateY" css properties instead of using positioning from next time because it is efficient. (recommended by Paul Irish)

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • 4
    I think if `top: 0px` is added to the original code, it would still work fine (not saying that is better, but it would work). I remember reading an answer on SO earlier which stated that FF doesn't apply transition when the property is not mentioned in the original element. – Harry Aug 26 '13 at 09:35
  • 2
    @Harry yeah that is right. just now realized. :) Here is the [working fiddle](http://jsfiddle.net/PRj3V/1/). – Mr_Green Aug 26 '13 at 09:37
3

Try this:

ul li { 
    /* standard property and other vendor prefixes */
    -moz-transition: -moz-transform 0.3s;
}
ul li:hover {
    /* standard property and other vendor prefixes */
    -moz-transform: translateY(-10px);
}
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
kangoroo
  • 359
  • 2
  • 10
  • @Sam add `-moz-transition` vendor prefix and also don't remove `transition` css property. If you did the same then ignore this message. – Mr_Green Aug 26 '13 at 09:11
  • @Mr_Green yes! Mr_green i tried that too.. i have updated the demo as wel – It worked yesterday. Aug 26 '13 at 09:18
  • 1
    @Sam it seems the problem is with `top` css property. When I replaced `top` with `margin-top`. It is working fine. – Mr_Green Aug 26 '13 at 09:21
  • then use this,ul li { -moz-transition: -moz-transform 0.3s; } ul li:hover { -moz-transform: translateY(-10px); } – kangoroo Aug 26 '13 at 09:25
  • @Mr_Green Thank you. Could you post it as an aswer. Then I can accept it :) – It worked yesterday. Aug 26 '13 at 09:26
  • 3
    Mr green's answer fits for you perfectly. your position:relative;top:-10px was telling FF to simply move your div relative -10px from its baseline, instead of animating it with what Mr. green suggested. – benny Aug 26 '13 at 09:29
2

It's definitely not the transition declaration or anything else in the CSS you've written --- try adding opacity:.5 to the hover state and you'll see it animate fine.

So, for some reason, Firefox is not transitioning the top property. To be honest, I don't know why yet. My solution for now would be to use a CSS transform to move the item up 10px instead:

ul li:hover {
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);

}

This successfully animates in Firefox as you can see here:

http://jsfiddle.net/y7yQQ/7/

David Goss
  • 677
  • 4
  • 8