How to make animation-duration dynamic according to a javascript value

Question

I currently have this code in the css where it transforms from one color to another but I want to make the duration dynamic according to some values in javascript instead of having it a fixed value.

What are some solutions that I have to achieve it? Here is my current CSS that transform it

ul li.transform a { 
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: 60s;
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: 60s;
  animation-fill-mode: forwards; 
}

@-webkit-keyframes transform{
  from { color: red; }
  to { color: green; }
}

@keyframes transform {
  from { color: red; }
  to { color: green; }
}

<ul>
  <li class="transform">
    <a href="#">link</a>
  </li>
</ul>

related: stackoverflow.com/q/49750473/8620333

Temani Afif
– Temani Afif

2019-04-10 19:31:52 +00:00
Commented Apr 10, 2019 at 19:31 — Temani Afif
– Temani Afif, Commented Apr 10, 2019 at 19:31

Rickard Elimää · Accepted Answer · 2019-04-10 18:11:11Z

2

I would use CSS variables ... mostly because they are awesome and easy to use.

<style>
  :root {
    --li-transform-animation-duration: 60s;
  }

ul li.transform a { 
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: var(-li-transform-animation-duration);
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: var(-li-transform-animation-duration);
  animation-fill-mode: forwards; 
}
</style>



<script>
  let root = document.documentElement;

  root.style.setProperty('--li-transform-animation-duration', '40s');
</script>

answered Apr 10, 2019 at 18:11

Rickard Elimää

7,6763 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahn Over a year ago

There's no need to do this when you can set animationDuration directly as a style property (see accepted answer).

Rickard Elimää Over a year ago

"No need" is a weird statement where changing the style tag is confusing. For one thing, searching the code for --li-transform-animation-duration will make it pop up in both the CSS code and the javascript code, as a small example. Using CSS variables also sets a readable standard for other developers, as setting the style directly is a) hidden in code, and b) arbitrary.

N'Bayramberdiyev · Accepted Answer · 2020-05-20 05:56:55Z

You also can use animationDuration property to define animation duration.

(function() {
  let time = "3s",
      set_duration = () => {
        document.getElementById("link").style.WebkitAnimationDuration = time;
        document.getElementById("link").style.animationDuration = time;
      };
    
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
      set_duration();
  } else {
      document.addEventListener('DOMContentLoaded', set_duration);
  }
})();

ul li.transform a { 
    color: red;
    -webkit-animation-name: transform;
    -webkit-animation-fill-mode: forwards;
    animation-name: transform;
    animation-fill-mode: forwards; 
}

@-webkit-keyframes transform {
    from { color: red; }
    to { color: green; }
}

@keyframes transform {
    from { color: red; }
    to { color: green; }
}

<ul>
    <li class="transform">
        <a href="#" id="link">link</a>
    </li>
</ul>

SuperDJ · Accepted Answer · 2019-04-10 21:00:43Z

How about using CSS variables. The variables can be changed by JS.

const transforms = document.getElementsByClassName('transform');

transforms[3].querySelector('a').style.setProperty('--transform-duration', '500ms')

ul li.transform a { 
--transform-duration: 60s; /* Default time */
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: var(--transform-duration);
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: var(--transform-duration);
  animation-fill-mode: forwards; 
}

@-webkit-keyframes transform{
  from { color: red; }
  to { color: green; }
}

@keyframes transform {
  from { color: red; }
  to { color: green; }
}

<ul>
  <li class="transform">
    <a href="#">link</a>
  </li>
  <li class="transform">
    <a href="#" style="--transform-duration:5s">link1</a>
  </li>
  <li class="transform">
    <a href="#" style="--transform-duration:1s">link2</a>
  </li>
  <li class="transform">
    <a href="#">link3 is 60s but reset to .5s</a>
  </li>
</ul>

Collectives™ on Stack Overflow

How to make animation-duration dynamic according to a javascript value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related