4

Приветствую!

Решил попробовать написать часы с помощью CSS3 трансформаций, но столкнулся с проблемой слишком медленной анимацией.

Например я задаю анимацию секундной стрелки, которая за 1 минуту должна повернуться на 360 градусов, но вместо минуты она поворачивается немного медленнее и из за этого часы начинают "отставать". В чем может быть проблема и как ее можно решить?

Код тут: jsfiddle

HTML

<div class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="secunde"></div>
</div>

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

1 ответ 1

2

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

Как вариант предлагаю несколько путей решения:

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.