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?
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.
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.
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.
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.
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