Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my CSS3 Transition not working in Firefox?

Tags:

css

firefox

It's working elsewhere on the site using the same CSS as far as I can tell. It works in Chrome. Here is the full page: anthonyotislawrence.com

Here's the part that's not working:

<a class="socialBox linkedIn">
    <h3>LinkedIn</h3>
    <p>linkedin.com/anthonyotislawrence</p>
</a> 
<a class="socialBox facebook">
    <h3>Facebook</h3>
    <p>facebook.com/anthonyotislawrence</p>
</a>

and the CSS

.socialBox {
    display:block;
    min-width:200px;
    padding:4px 0 4px 55px;
    height:40px;
    line-height:20px;
    background-repeat:no-repeat;
    background-position:left center;
    position:relative;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
    text-decoration:none;
    margin:30px 0;
}
.socialBox.linkedIn {
    background-image:url(../images/linkedin.png);
}
.socialBox.facebook {
    background-image:url(../images/facebook.png);
}
.socialBox:hover {
    left:15px;
    cursor:pointer;
}
.socialBox:hover p {
    text-decoration:underline;
}
like image 365
Ben Avatar asked May 21 '11 20:05

Ben


People also ask

How do you trigger transition CSS?

Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).

How do you add transition effects in css3?

To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property.

Does Internet Explorer 9 support transition properties?

As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations.

How do CSS transitions work?

CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g., linearly or quick at the beginning, slow at the ...


2 Answers

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.

like image 181
Ben Avatar answered Sep 21 '22 11:09

Ben


I had an issue similar to the OP where my transitions worked in every browser except Firefox. In my case I had intervals of zero seconds. I used just a 0 and not 0s. This caused the transition to not work at all in Firefox. I don't think this was the issue for the OP but posting here in case it helps someone else.

This does not work in Firefox:

top 0 linear 1s

This works:

top 0s linear 1s
like image 40
SkipHarris Avatar answered Sep 23 '22 11:09

SkipHarris