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

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

    

Ответы

Ответ 1

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

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