How to do frame-by-frame animation with javascript?

[oro_junestar]

I've got a pretty complicated idea; I want to make an interactable pet window with my cat character, Hope. I've split her into multiple parts to allow for interactions like petting her head, poking her eyes, or swapping her bandana.
This is how she looks on the site:

This is how she's arranged in the code:


My question is, how can I use scripts to move the individual parts to set positions in set timing?

I want to start with a tail wag animation like this:

[MediocreMetastasis]

There are multiple ways I can see you tackling this problem

Theres the <canvas> element. You do need to heavily use js and a bit complicated but you can easily draw images with set positions, this method is basically like rendering game graphics. This option would give you the most freedom.

You can use css animations and interchange them using js

example css animation

/* The animation code */

CSS:
@keyframes tail-wag {
  from {transfrom: rotate(45);}
  to {transform: rotate(-45);}
}

/* The element to apply the animation to */
.tail-wag {
  animation-name: tail-wag;
  animation-duration: 4s;
}
JS:
const tail = document.getElementByID("tail");

// 1. Add the animation
tail.classList.add('tail-wag');

// 2. Remove the animation
tail.classList.remove('tail-wag');

// 3. Toggle it on/off (e.g., on a button click)
tail.classList.toggle('tail-wag');

//May work IDK just throwing stuff at a wall

[close]

Or good old updating the rotation property using a setInterval() function

2nd one seems the easiest