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>

Answer 1

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%;
  }
}

Answer 2

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);

Answer 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

Answer 4

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>