How does Element.animate() translate into CSS @keyframes?

Question

I have found a repo which uses Vanilla Javascript to create a slider animation. I am trying to reuse this animation in my React app. The repo creates the animation with the Element.animate() technique, which I need to translate to CSS Keyframes for use in React.

The Element.animate() Javascript code:

this.animation = this.symbolContainer.animate(
   [
     { transform: "none", filter: "blur(0)" },
     { filter: "blur(2px)" },
     {
       transform: `translateY(-${
         (
           (Math.floor(this.factor) * 10) /
           (3 + Math.floor(this.factor) * 10)
         ) * 100
       }%)`,
       filter: "blur(0)",
     },
   ],
   {
     duration: this.factor * 1000,
     easing: "ease-in-out",
   }
);

I tried to put this animation into CSS @keyframes format. My CSS @keyframes code:

/** the keyframes **/
@keyframes spin {
    0% { transform: none; filter: blur(0); }
    50% { filter: blur(2px); offset: 0.5; }
    100% { transform: translateY(-${(props) => `${(
      (Math.floor(props.factor) * 10) /
      (3 + Math.floor(props.factor) * 10)
    ) * 100}`
    }%); filter: blur(0); }
}

/** duration and easing **/
.icons {
    animation: ${(props) => props.animate ? `spin ${props.factor * 1000}ms` : "none"};
    animation-timing-function: ease-in-out
}

My CSS animation is not looking the same as the original and I have no idea why. I have quadruple checked all of my numerical inputs (the this.factor stuff) and they are the same in my app as in the Vanilla JS app. The animation runs in my React app, it just looks different to the original.

My guess is that.animate() does not translate correctly into the @keyframes code I have written. Are the 0%, 50%, 100% intervals wrong? Could anyone explain exactly how to translate.animate() into @keyframes? How would I write the original code in @keyframes format?

Answer 1

Since I don't have access to the rest of the project I allowed for some hardcoding. Looks similar I hope.

 var elem = document.querySelector(".box1"); var factor = 1; elem.animate( [{ transform: "none", filter: "blur(0)" }, { filter: "blur(2px)" }, { transform: `translateY(-30%)`, filter: "blur(0)", }, ], { duration: 1000, easing: "ease-in-out", } );

 .box { width: 180px; height: 120px; border: 1px solid black; margin: 50px 10px; float: left; }.box2 { animation-name: spin; animation-duration: 1s; animation-timing-function: ease-in-out; } /** the keyframes **/ @keyframes spin { 0% { transform: none; filter: blur(0); } 50% { filter: blur(2px); } 100% { transform: translateY(-30%); filter: blur(0); } }

 <div class="box box1">elem.animate</div> <div class="box box2">css animation</div>