javascript - スナップを新しい角度に回転させますが、移行がスムーズではありません

Question

私は非常に複雑な問題を抱えているので、ここで何か助けていただければ幸いです。基本的に、回転が必要な一連の画像があります。

私の実際の回転スクリプトは正常に動作しますが (以下)、スムーズに回転するはずですが、そうではなく、所定の位置にスナップします。StackOverflow でこの質問をして、なぜスナップしていてスムーズに回転しないのかを調べています。

ブラウザとして Google Chrome を使用しています。

CSS:

.marker {
  transition: ease 5s;
  -webkit-transition: ease 5s;
}

JavaScript:

function setBearings() {
  for (var i = 0; i < markers.length; i++) {
    var bearing = markers[i][BEARING];
    var service = markers[i][SERVICE];
    var reg = markers[i][REGISTRATION];

    if (bearing != -1) {
      $(".marker.id-" + reg).css({
        'transform':'rotate('+bearing+'deg)',
        '-webkit-transform':'rotate('+bearing+'deg)',
        '-moz-transform':'rotate('+bearing+'deg)',
        '-o-transform':'rotate('+bearing+'deg)',
        '-ms-transform':'rotate('+bearing+'deg)'
      });
    }
  }
}

function updateInfoBoxes() {
  for (var i = 0; i < markers.length; i++) {
    var googleMarker = getMarkerObject(markers[i][REGISTRATION]);

    actualMarkers[i] = document.createElement("div");
    actualMarkers[i].className = "box";
    actualMarkers[i].addEventListener("click", createHandler(i), false);

    if (markers[i][BEARING] == -1) {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/static.png" />';
    } else {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/dynamic.png" />';
    }

    if (infoBoxes[i])
      infoBoxes[i].setContent(actualMarkers[i]);

    infoBoxes[i] = new InfoBox({
       content: actualMarkers[i]
      ,disableAutoPan: true
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-20, -35)
      ,zIndex: 100000
      ,boxStyle: { 
        opacity: 1
       }
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    });

    infoBoxes[i].open(map, googleMarker);
  }
  setBearings();
}
updateInfoBoxes();