OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

element.animate() using Keyframes seems to ignore easing function

  • Thread starter Thread starter Fernandossmm
  • Start date Start date
F

Fernandossmm

Guest
I'm trying to make a CSS animation that bounces back and forth, with a pause at each end. Using the Javascript method element.animate() seems to do the trick, except that using keyframes breaks the easing function, which doesn't happen when using only CSS.

Am I using animate() wrong? Is it a bug? Why do Javascript and CSS behave differently? The animate MDN docs don't say anything about this.


Code:
const element = document.getElementById("animation")
const anim = element.animate(
  [
    { offset: 0, transform: "translateX(0)" },
    { offset: .1, transform: "translateX(0)" },
    { offset: .8, transform: "translateX(10vw)" },
    { offset: 1, transform: "translateX(10vw)" },
  ],
  {
    duration: 5000,
    easing: "ease-in-out",
    direction: "alternate",
    iterations: Infinity,
  }
);

<div id="animation">Ball</div>

Creating the same animation in CSS works with the correct easing.

Code:
#animation {
  animation-name: move;
  animation-direction: alternate;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(10vw);
  }
  to {
    transform: translateX(10vw);
  }
}

However, I can't use CSS because I want the keyframe percentages/offsets to be changed programmatically.

Also, removing the middle two keyframes in the JS code fixes it, but it still isn't what I want.

<p>I'm trying to make a CSS animation that bounces back and forth, with a pause at each end. Using the Javascript method element.animate() seems to do the trick, except that using keyframes breaks the easing function, which doesn't happen when using only CSS.</p>
<p>Am I using animate() wrong? Is it a bug? Why do Javascript and CSS behave differently? The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/animate" rel="nofollow noreferrer">animate MDN docs</a> don't say anything about this.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const element = document.getElementById("animation")
const anim = element.animate(
[
{ offset: 0, transform: "translateX(0)" },
{ offset: .1, transform: "translateX(0)" },
{ offset: .8, transform: "translateX(10vw)" },
{ offset: 1, transform: "translateX(10vw)" },
],
{
duration: 5000,
easing: "ease-in-out",
direction: "alternate",
iterations: Infinity,
}
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div id="animation">Ball</div></code></pre>
</div>
</div>
</p>
<p>Creating the same animation in CSS works with the correct easing.</p>
<pre class="lang-css prettyprint-override"><code>#animation {
animation-name: move;
animation-direction: alternate;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

@keyframes move {
from {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(10vw);
}
to {
transform: translateX(10vw);
}
}
</code></pre>
<p>However, I can't use CSS because I want the keyframe percentages/offsets to be changed programmatically.</p>
<p>Also, removing the middle two keyframes in the JS code fixes it, but it still isn't what I want.</p>
 
Top