Change the keyframes value of css with jQuery

Question

Is there any way to change the values of @keyframes (CSS) with jQuery

To make it a little bit more clear, I have this in my css file:

@keyframes bg {
  50% { background: #3b99fcff; }
}

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite,
             bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

I would like to change the 'background' with Jquery

stackoverflow.com/questions/5105530/…

Sangram Nandkhile
– Sangram Nandkhile

2018-07-06 00:17:22 +00:00
Commented Jul 6, 2018 at 0:17 — Sangram Nandkhile
– Sangram Nandkhile, Commented Jul 6, 2018 at 0:17

zero298 · Accepted Answer · 2018-07-06 00:16:22Z

2

You could use a CSS variable and change that:

setTimeout(() => {
  console.log("changing");
  document.getElementById("fizz").style.setProperty("--foo", "green");
}, 2000);

:root {
  --foo: blue;
}

@keyframes hello {
  from {
    background-color: yellow;
  }
  to {
    background-color: var(--foo);
  }
}

#fizz {
  height: 1em;
  animation: 1s infinite alternate hello;
}

<div id="fizz">
  <div>

answered Jul 6, 2018 at 0:16

zero298

27.1k10 gold badges80 silver badges109 bronze badges

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

2 Comments

Temani Afif Over a year ago

What about IE? it will fail here ;)

Ricardo Over a year ago

Hi @zero298. This is working! well almost. I tested in Firefox and Chrome but only works on Firefox

Collectives™ on Stack Overflow

Change the keyframes value of css with jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related