comment déplacer la trotteuse d'une classe analogique en douceur avec jquery

Question

Je veux déplacer l'aiguille des secondes en douceur car j'ai vu de nombreuses montres déplacer leur aiguille des secondes rapidement sans faire de mouvements de tic-tac. J'ai essayé de le faire avec la transition transform css mais quelque chose ne va pas et ne fonctionne pas en douceur. j'ai un problème sur 59 à 0 sec et le mouvement de chargement de la page. Quelqu'un peut m'aider à le réparer ? Je devrais utiliser l'intervalle.

function displayTime() {
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var secend = date.getSeconds();
  var rotate0 = hours * 30;
  var rotate1 = minutes * 0.45;
  var horotate = rotate0 + rotate1;
  var minrotate = minutes * 6;
  var secrotate = secend * 6;
  $('#hour').css("-webkit-transform", " rotate(" + horotate + "deg)");
  $('#min').css("-webkit-transform", " rotate(" + minrotate + "deg)");
  $('#sec').css("-webkit-transform", " rotate(" + secrotate + "deg)");
}
var interval;

interval = setInterval(displayTime, 500);

#sec {
  -webkit-transform-origin: center bottom;
  -webkit-transition: -webkit-transform 1s linear;
  z-index: 10;
  width: 2px;
  height: 80px;
  background: red;
  position: absolute;
  right: 0;
  left: 0;
  top: 20px;
  margin: auto;
}
body {
  background: #CCC;
}
#clock {
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50%;
  position: relative;
}
#min {
  width: 4px;
  height: 75px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 25px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 8;
}
#hour {
  width: 4px;
  height: 50px;
  background: black;
  position: absolute;
  right: 0;
  left: 0;
  top: 50px;
  margin: auto;
  -webkit-transform-origin: center bottom;
  -webkit-transform: rotate(0deg);
  z-index: 6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clock">
  <div id="hour"></div>
  <div id="min"></div>
  <div id="sec"></div>
</div>