I want to move the seconds hand smoothly as I have watched many watches moving their seconds hand swiftly with out making tick tick movements, I try to make it with transition transform css but something is wrong. i have problem on 59 to 0 sec and page load movement and screen turn on movement.

anyone can help me to fix it ?

code snippet: https://jsfiddle.net/fbmsgmao/

Full Html Code :

<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>
<style>
  #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;
  }

</style>
<script>
  function displayTime() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    var rotate0 = hours * 30;
    var rotate1 = minutes * 0.45;
    var horotate = rotate0 + rotate1;
    var minrotate = minutes * 6;
    var secrotate = second * 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);

</script>