para - webkit css firefox

transiciones de webkit que no funcionan en cromo y safari

Question

Tengo problemas para hacer una transición al trabajo en los navegadores webkit, mientras que funciona perfectamente en Firefox. Mi código está debajo

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

La transformación está funcionando en FF, Safari y Chrome, pero la transición solo funciona con FF. He intentado cambiar el img tanto en bloque en línea como en bloque, lo que no hizo diferencia que pude ver. ¿Alguien ha encontrado esto antes, o puede ver si hay algún problema con mi código? Cualquier ayuda que pueda ofrecer será muy apreciada.

Answer 1

Sus

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