Closed
Bug 820376
Opened 12 years ago
Closed 12 years ago
CSS transitions not working for sibling selectors
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: dominic.tobias, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11
Steps to reproduce:
.transition(@duration:0.2s, @ease:ease-out, @property:all) {
-webkit-transition: @property @duration @ease;
-moz-transition: @property @duration @ease;
-o-transition: @property @duration @ease;
-ms-transition: @property @duration @ease;
transition: @property @duration @ease;
}
a.link + img {top:-3px; .transition(500ms, ease-in-out, top);}
Actual results:
There is no transition animation.
(Also putting it directly on the image outside of the hover state doesn't work)
Tested to works in Chrome, but also doesn't work in Opera (with the relevant vendor prefixes of course)
Expected results:
I should have seen the top value animated from top:0 to top:-3px
Could you attach a minimal testcase, please.
Flags: needinfo?(dominic.tobias)
Here is a minimal example: http://jsfiddle.net/QRGPm/1/
Try in Chrome vs FF
Flags: needinfo?(dominic.tobias)
I tried in IE9, FF17 and FF8 (old version), same behaviour. The red paragraph goes downwards then returns to its inial place when the mouse is hovering the link (href).
Yep, but it is using the transition css, of 500ms, so it is supposed to animate downwards for half a second. Sibling selector works in FF. But applying animations to them doesn't seem to work.
If you test in Chrome you will see the red button moves downwards in an animation.
Comment 5•12 years ago
|
||
If you add an initial top value e.g.
a {
position:relative; display:block; background-color:red; width:50px height:150px; top: 0px;
}
It works. Note that the width and height properties above are invalid as they are in the original fiddle since they're not separated by a ;
Ahhh, sorry & thanks for looking and solving I will close this now
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•