Убери transition, он тебе только мешает. setTimeout, setInterval тут не подойдут, они не гарантируют, что твои часики будут тикать соответственно времени.
Вариантов у тебя несколько, задать движение стрелок при помощи @keyframes, чтоб они все время крутились, продолжительность 60 сек и 3600 сек соответственно. Программно при загрузке поворачивать контейнер стрелки на нужный угол, чтоб стрелки начинали идти с нужного положения.
Другой вариант это двигать стрелки на js, анимировано и плавно, независимо от частоты кадров. Увеличиваем значение и угол поворота растет и растет до бесконечности, но можешь его уместить в рамки 0 - 359 -
(seconds * 6) % 360const sec = document.getElementById("sec");
const min = document.getElementById("min");
let lastTime = Date.now();
let seconds = (new Date()).getSeconds();
let minutes = (new Date()).getMinutes() + seconds / 60;
function animate() {
const now = Date.now();
const deltaTime = now - lastTime;
lastTime = now;
seconds += deltaTime / 1000;
minutes += deltaTime / 1000 / 60;
sec.style.transform = `rotate(${seconds * 6}deg)`;
min.style.transform = `rotate(${minutes * 6}deg)`;
requestAnimationFrame(animate);
}
animate();
Аналогично можно подсчитывать время на каждом кадре
const sec = document.getElementById("sec");
const min = document.getElementById("min");
function animate() {
const date = new Date();
const seconds = date.getSeconds() + (date.getTime() % 1000) / 1000;
const minutes = date.getMinutes() + seconds / 60;
sec.style.transform = `rotate(${seconds * 6}deg)`;
min.style.transform = `rotate(${minutes * 6}deg)`;
requestAnimationFrame(animate);
}
animate();
