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>