profesor08

Убери transition, он тебе только мешает. setTimeout, setInterval тут не подойдут, они не гарантируют, что твои часики будут тикать соответственно времени.

Вариантов у тебя несколько, задать движение стрелок при помощи @keyframes, чтоб они все время крутились, продолжительность 60 сек и 3600 сек соответственно. Программно при загрузке поворачивать контейнер стрелки на нужный угол, чтоб стрелки начинали идти с нужного положения.

Другой вариант это двигать стрелки на js, анимировано и плавно, независимо от частоты кадров. Увеличиваем значение и угол поворота растет и растет до бесконечности, но можешь его уместить в рамки 0 - 359 - (seconds * 6) % 360

const 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();

const arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];

const getImg = async (url) => {
  const response = await fetch(url); 
  const blob = await response.blob();
  const reader = new FileReader();

  return new Promise(resolve => {
    reader.addEventListener('loadend', function() {
      resolve({image: reader.result});
    });
    reader.readAsDataURL(blob);
  });
}

document.querySelector('button').addEventListener('click', async () => {
    
    const arrImg = await Promise.all(arr.map(
      url => getImg(url)
    ));

    console.log(arrImg);
});

Там все сложно, Snap + bodymovin, в /static/js/home.js можешь дернуть код, точка входа селектор "svg-wrap". От него и пляши, там дойдешь до Snap(i.$mainSVG[0]) и смотри какие там параметры и откуда они растут.