webkit transitions not working in chrome and safari
11,462
It's
-webkit-transition:-webkit-transform 1s;
Author by
danny slade
Updated on June 05, 2022Comments
-
danny slade almost 2 years
I'm having trouble getting a transition to work in webkit browsers, while it works perfectly in firefox. My code is below
HTML <div class="dropdown" data-id="new-houses"> <h3>New Houses</h3> <img src="/local/images/down-arrow.png" /> </div> <div id="new-houses" style="display:none;"> <!--content of div--> </div> CSS .dropdown{ width:100%; cursor:pointer; height:50px; clear:both; } .dropdown img{ width:20px; height:17px; float:right; margin-right:20px; margin-top:17px; -webkit-transition:transform 1s; -moz-transition:transform 1s; -ms-transition:transform 1s; -o-transition:transform 1s; transition:transform 1s; } .point_down{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); } jQuery $('.dropdown').click(function(){ var self = $(this); self.find('img').toggleClass('point_down'); $('#'+self.attr('data-id')).slideToggle(1000); });
The transform is working in FF, Safari and Chrome, but the transition only works with FF. I have tried changing the img to both inline-block and block, which made no difference I could see. Has anyone encountered this before, or can see if there's anything wrong with my code? Any help you can offer will be much appreciated.