CODEWITHSUNDEEP
csscss-transitions
Moss
Moss

Reputation: 3803

CSS transition doesn't happen in Firefox or IE

I have a simple style like:

li, a {
    display: inline-block;
}
li {        
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}

which is supposed to work with some icons in a menu so that they sink down when you hover over them. It works fine in Chrome, but not in IE or FF. What could possibly be wrong with this?

Upvotes: 0

Views: 59

Answers (1)

Moss
Moss

Reputation: 3803

Firefox and IE require that you specify an initial attribute for the animated property.

So:

li, a {
    display: inline-block;
}
li {        
    top: 0;        /* ADD THIS! */
    relative: 0;   /* This is important too or the item will pop back   
                      instead of transition*/
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}

Upvotes: 1

Related Questions