How to implement a sharp animation frame change in css?

Question

css

There are animation frames (separate svg files). How to make them change for animation (for example, as in Unity or in any other game engine). Mb need to use js. Tell

Answer 1

You can try with keyframes

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   animation: fontbulger 2s infinite;

For example, in this example, in 0.6 seconds the font changes from 10 to 15, and then in 1.4 seconds it changes from 15 to 12.
You need to do this most likely with background (image). but here the question is how fast they load. if it takes a long time, then most likely you can’t do without js