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>

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>

• javascript
• css

• related: stackoverflow./q/49750473/8620333 – Temani Afif Commented Apr 10, 2019 at 19:31

3 Answers 3

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>

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 === "plete" : 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>

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>