Menu
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;
}
365
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).
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.
As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations.
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 ...
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.
181
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
