Why does the timing of these different animations get slower and out of order over time?

Question

Here I have a Video that changes every few seconds with spinning animation + video getting small and big during the spinning. But over time the timing gets out of order.


let degree = 720;
function rotateElement(){
    let spin = `rotate(${degree}deg)`;
    document.getElementById('myVideo').style.transform = spin;
    document.getElementById('myVideo').style.transitionDuration = "1s";
    degree += 720;
}

function smaller(){
    document.getElementById('myVideo').style.maxWidth = "10px";
    document.getElementById('myVideo').style.maxHeight = "10px";
    document.getElementById('myVideo').style.transitionDuration = "1s";
}

function bigger(){
    document.getElementById('myVideo').style.maxWidth = "30vw";
    document.getElementById('myVideo').style.maxHeight = "19vw";
    document.getElementById('myVideo').style.transitionDuration = "1s";
}


//setInterval(change, 5000);





window.onload = function () {
    setInterval(change, 5000);
    setInterval(rotateElement, 4900);
    setInterval(smaller, 4850);
    setInterval(bigger, 5050);
    
};

setInterval is not accurate. Why are you not using just css to do it? — epascarello, Dec 07 '22 at 21:59
https://stackoverflow.com/questions/8173580/setinterval-timing-slowly-drifts-away-from-staying-accurate — epascarello, Dec 07 '22 at 22:01
Why have you tagged node.js and ejs? They don't appear to be relevant to the question! — phuzi, Dec 08 '22 at 16:47

score 1 · Answer 1 · answered Dec 08 '22 at 16:39

Not sure exactly what you want the animation to do with the rotate, but this is the basic idea of just doing it in CSS.

.test {
  background-color: yellow;
  /*animation: shrink 5s 3s ease infinite, rotate 50s steps(10, end) forwards infinite; */
  animation: shrink 5s 3s ease infinite, rotate 50s forwards infinite;
  transition: width 1s, height 1s;
  overflow: hidden;
  width: 30vw;
  height: 19vh;
}

@keyframes shrink {
  0%,
  65%,
  90%,
  100% {
    width: 30vw;
    height: 19vh;
  }
  70% {
    width: 14px;
    height: 10px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<img class="test" src="http://placekitten.com/200/100">

Why does the timing of these different animations get slower and out of order over time?

1 Answers1