Chris Chris - 5 months ago 8
CSS Question

Wind up clock to current time

I've made an analogue style clock with javascript, css.

function updateClock() {
var now = moment(),
second = now.seconds() * 6,
minute = now.minutes() * 6,
hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12;

document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
}

function timedUpdate() {
updateClock();
setTimeout(timedUpdate, 1000);
}

timedUpdate();


I'm wanting to add a wind up effect, so on page load the clocks start at 12:00 and animates/winds up to the current time (a bit like the clocks here: http://www.apple.com/uk/macbook-air/)

Here's the Fiddle

Thanks for any help!

Answer

It looks like you we're just missing the CSS transition.

-webkit-transtition: 0.5s all

It will rotate over 0.5 seconds. I've added it to your fiddle with the webkit prefix:

https://jsfiddle.net/pw8bfjq2/1/