I need to convert the CSS Keyframes in the fenced code block to JavaScript. The returned value should be var cylon-eye = document.getElementById("cylon-eye");
.
To do this, I’ve added the following JavaScript code:
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) };
Once the code is added, the returned value should be var cylon-eye = document.getElementById("cylon-eye");
.