webkit-transitions funktioniert nicht in chrome und safari

Ich bin mit Mühe ein übergang zur Arbeit in webkit-Browsern, während es funktioniert perfekt in firefox. Mein code ist unten

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);
});

Die Transformation funktioniert in FF, Safari und Chrome, aber der übergang funktioniert nur mit FF. Ich habe versucht, die änderung der img-sowohl inline-block und-block, das machte keinen Unterschied, den ich sehen konnte. Hat jemand erlebt, oder kann sehen, ob es etwas falsch mit meinem code? Jede Hilfe, die Sie anbieten können wird sehr geschätzt.

InformationsquelleAutor danny slade | 2013-05-02