Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 transitions not firing first time in Firefox 4

I am experimenting with some css3 transitions. I put together a quick slider test and it works well in the webkit family. In Firefox 4, the first time you click on the left link the slider is suppose to slide to the left, however, there is no css transition until the second time you click the link. I put the demo up on jsfiddle - http://jsfiddle.net/mrleroylee/ctY68/

Is this a result of something in my code or is this a bug?

like image 838
LeRoy Avatar asked Jun 08 '11 22:06

LeRoy


People also ask

How do I make transitions smoother in CSS?

With CSS3 we can specify how an element changes by just describing its current and target states. CSS3 will create a smooth transition between these states by applying a cubic Bézier curve and gradually change the element appearance.

What are CSS3 transitions and transform?

So what are transforms and transitions? At their most basic level, transforms move or change the appearance of an element, while transitions make the element smoothly and gradually change from one state to another.

Why do you use CSS3 transitions?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.


1 Answers

Set left: 0 in your styles for ul; that got it working in the fiddle for me: http://jsfiddle.net/ctY68/4/

Looks like Gecko isn't considering your first style change a transition because there was no initial value set.

like image 181
RwwL Avatar answered Sep 18 '22 23:09

RwwL