How can I set a CSS keyframes in Javascript?

Question

I have a CSS keyframes shown as below, my problem is I would like to set it as JavaScript (to put inside my div which already have some functions) so that I can return the "element" value to my function

.cylon-eye {
  background-color: yellow;
  background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
  color: none;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

I've tried to convert as below after suggestion, is that the return value i should call is var cylon-eye = document.getElementById("cylon-eye");?

<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';

if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));

document.getElementsByTagName("head")[0].appendChild(css);

}

var styles = '#cylon-eye { background-color: yellow; background-image: linear-gradient(to right,rgba(255,255,255, 0.9) 25%,rgba(255,255,255, 0.1) 50%,rgba(255,255,255, 0.9) 75%); color: none; height: 100%; width: 20%;animation: 4s linear 0s infinite alternate move-eye; z-index: 10;}';
var keyFrames = '\
@keyframes move-eye {\
  from {\
    margin-left: -20%;\
  }\

  to {\
    margin-left: 100%;\
  }\
}';

window.onload = function() { appendStyle(styles) };
</script>

@lvy Hoo Hui En , I have shared example with two option in stackoverflow.com/a/59575227/5783700 post, You can check that post, Hope it helps to you. — ankitkanojia
– ankitkanojia, Commented Jan 3, 2020 at 8:22
hi @ankitkanojia, thanks for the suggestion and coding. if i want to return the colors to a boxes that i create, i only need to "return element;" right? — Ivy Hoo Hui En
– Ivy Hoo Hui En, Commented Jan 3, 2020 at 8:56
@lvy Hoo Hui En, yes you can return but you need to provide an id to your dynamically created element on DOM in your example. or else you can refer stackoverflow.com/a/6338234/5783700 post better understanding, let me know still required anything. Thank you!! — ankitkanojia
– ankitkanojia, Commented Jan 3, 2020 at 9:04

Jonathan E. Landrum · Accepted Answer · 2023-05-22 13:08:59Z

20

2022 SOLUTION

Now it's possible to use the method .animate() as in this example

document.getElementById("tunnel").animate([
  // key frames
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  iterations: Infinity
});

Docs:

edited May 22, 2023 at 13:08

Jonathan E. Landrum

3,2414 gold badges38 silver badges50 bronze badges

answered Oct 22, 2022 at 10:58

Adrian Lopez

2,9175 gold badges33 silver badges51 bronze badges

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

1 Comment

Jack Over a year ago

How can I set @keyframes scroll using this?

ankitkanojia · Accepted Answer · 2020-01-03 08:20:48Z

let me share with you two snippets, one is using CSS + javascript and another is only using javascript, you can use whatever preferred to you. Hope its helpful to you.

WITH JAVASCRIPT

let dynamicStyles = null;

function addAnimation(body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }

  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

addAnimation(`
      @keyframes move-eye { 
         from {
           margin-left: -20%;
         }
        to {
          margin-left: 100%;
        }
      }
    `);



var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";

document.body.appendChild(element);

WITH CSS + JAVASCRIPT

var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
document.body.appendChild(element);

.cylon-eye {
  background-color: yellow;
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9) 25%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.9) 75%);
  color: none;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move-eye;
}

@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

The former doesn't work on Cromium, in my case. The latter does not really add (or modify, as I needed) the keyframes.

Praveen Vishnu · Accepted Answer · 2020-01-03 06:38:59Z

3

this works fine for me, Hope this will help :)

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@keyframes slidein {\
  from {\
    margin-left: 100%;\
    width: 300%; \
  }\

  to {\
    margin-left: 0%;\
    width: 100%;\
  }\
}';

document.getElementsById('slideDiv')[0].appendChild(style);

answered Jan 3, 2020 at 6:38

Praveen Vishnu

4432 gold badges7 silver badges20 bronze badges

3 Comments

Martijn Over a year ago

Please use developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Martijn Over a year ago

And keyFrames can be a const as it's never changed

kavadias Over a year ago

Don't you think the keyFrames should be related to the style, somehow?

BRO_THOM · Accepted Answer · 2020-01-03 08:34:25Z

3

It would be wise to use Native API functionality to alter CSSStyleSheets. You can access existing stylesheets using the following method

document.styleSheets[0].cssRules

This will return all applied rules and you will be able to edit the rule where the selectorText matches your selector

answered Jan 3, 2020 at 8:34

BRO_THOM

8639 silver badges28 bronze badges

Comments

Joimee Cajandab · Accepted Answer · 2020-01-03 10:00:37Z

3

have you tried using a <style></style> tag?

For example:

const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");

keyFrames.innerHTML = `
  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .loading {
    animation: loading 1s ease infinite;
  }
`;

loading.appendChild(keyFrames);

.loading {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
  background-repeat: no-repeat;
}

<!doctype html>
<html>
  <head>
    <title>Keyframes in js</title>
  </head>
  <body>
    <div class="loading"></div>
  </body>
</html>

answered Jan 3, 2020 at 10:00

Joimee Cajandab

3153 silver badges17 bronze badges

2 Comments

kavadias Over a year ago

document.head.appendChild(keyFrames); is more reasonable, I think.

kavadias Over a year ago

This worked on Firefox and Cromium, for me and when modifying keyFrames multiple times (onResize).

Grzegorz Piczora · Accepted Answer · 2023-12-05 12:00:19Z

0

This is good for me.

document.getElementById(nodeID).insertAdjacentHTML("beforeend",
`
<style type="text/css">
  @keyframes your-animation {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
  }
</style>
`
)

answered Dec 5, 2023 at 12:00

Grzegorz Piczora

1

Collectives™ on Stack Overflow

How can I set a CSS keyframes in Javascript?

6 Answers 6

2022 SOLUTION

1 Comment

1 Comment

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2022 SOLUTION

1 Comment

1 Comment

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related