Не правильная работа анимации CSS3

Приветствую!
Решил попробовать написать часы с помощью CSS3 трансформаций, но столкнулся с проблемой слишком медленной анимацией.
Например я задаю анимацию секундной стрелки, которая за 1 минуту должна повернуться на 360 градусов, но вместо минуты она поворачивается немного медленнее и из за этого часы начинают "отставать". В чем может быть проблема и как ее можно решить?
Код тут: jsfiddle
HTML

CSS
.clock { border: 1px solid; width: 300px; height: 300px; border-radius: 100%; position: relative; }
.hour { height: 40%; width: 5px; background: red; position: absolute; left: 50%; top: 10%; margin-left: -3px; -webkit-transform-origin: 50% 100%; -webkit-animation: hour 43200s linear infinite; }
.minute { height: 46%; width: 3px; background: green; position: absolute; left: 50%; top: 5%; margin-left: -2px; -webkit-transform-origin: 50% 100%; -webkit-animation: min 3600s linear infinite; }
.secunde { height: 50%; width: 3px; background: #ccc; position: absolute; left: 50%; margin-left: -2px; -webkit-transform-origin: 50% 100%; -webkit-animation: sec 59s linear infinite; }
@-webkit-keyframes sec { from { -webkit-transform: rotate(252deg); }
to { -webkit-transform: rotate(360deg); }; }
@-webkit-keyframes min { from { -webkit-transform: rotate(72deg); }
to { -webkit-transform: rotate(360deg); }; }
@-webkit-keyframes hour { from { -webkit-transform: rotate(360deg); }
to { -webkit-transform: rotate(360deg); }; }
#js-clock { width: 300px; height: 300px; border: 1px solid; border-radius: 100%; }

Ответ

Из-за времени выполнения скрипта и других причин ориентироваться на счётчик не правильно. Как вариант предлагаю несколько путей решения: Использовать меньшее время задержки, чтобы учесть отставание. Реализовать часы с помощью js с проверкой времени на сервере.