css - webkit transitions not working in chrome and safari -


i'm having trouble getting transition work in webkit browsers, while works in firefox. code 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 working in ff, safari , chrome, transition works ff. have tried changing img both inline-block , block, made no difference see. has encountered before, or can see if there's wrong code? can offer appreciated.

it's

-webkit-transition:-webkit-transform 1s; 

Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -