Приветствую!
Решил попробовать написать часы с помощью 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%;
}