CSS animation with JavaScript

Question

I have just started to learn JavaScript and am trying to make an analog clock. First I have created the second meter with css. Then I am trying to convert it into JavaScript. I don't want to use any jQuery or any other JS framework for this.

How to set the css @keyframe in JavaScript? Here is my code for CSS:

.second{
  height: 5px;
  width: 180px;
  background-color: #aaaaaa;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -o-transition: rotate(360deg);
  transform-origin: left center;
  z-index: 3;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

js code for this css

var second = document.querySelector(".second");
      second.style.height = "5px";
      second.style.width = "180px";
      second.style.backgroundColor = "#aaaaaa";
      second.style.borderRadius = "5px";
      second.style.position = "absolute";
      second.style.top = "50%";
      second.style.left = "50%";
      second.style.transformOrigin = "left center";
      second.style.zIndex = "3";

      second.style.webkitAnimationName = "Spin";
      second.style.webkitAnimationDuration = "60s";
      second.style.webkitAnimationIterationCount: "infinite"; //doesn't work
      second.style.webkitAnimationTimingFunction: "linear"; //doesn't work
      second.style.oTransition: "rotate(360deg)"; //doesn't work

Why do you want to use Javascript for this? This can be done in css alone. — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jun 22, 2016 at 10:27
@MohitBhardwaj maybe OP can do it in css, just want to learn javascript. — vaso123
– vaso123, Commented Jun 22, 2016 at 10:30
@MohitBhardwaj You may to look at the requestAnimationFrame() function - see the docs developer.mozilla.org/en-US/docs/Web/API/window/… — David Votrubec
– David Votrubec, Commented Jun 22, 2016 at 10:39
Does what you've written work, and if not, how does it not work? — user663031
– user663031, Commented Jun 22, 2016 at 10:46
@DavidVotrubec It seems that he wants (for some unknown reason) to set the styles programmatically, while continuing to use CSS animations, in which case there is no need for rAF. — user663031
– user663031, Commented Jun 22, 2016 at 10:46

enhzflep · Accepted Answer · 2016-06-22 10:44:58Z

This can be trivially achieved by appending the desired text (the @keyframes spin rule) to a style tag in the document.I haven't bothered to do a check to see if it's been done yet, so clicking the button multiple times will append the rule multiple times. It needs at least 1 style tag to function, the tag used is the last one and lastly, this will fail if the last style tag references an external file.

To trivially avoid these limitations, you can simply create a new script element and append it to the document.head element. You'll just want to set a flag or give the tag a class so you can find it later and avoid adding it twice.

function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}

function onStart()
{
	var styleTags = allByTag('style');
	var lastStyleElem = styleTags[ styleTags.length-1 ];
	
	var txt = '@keyframes spin {' + '\n';
		txt += ' from {transform:rotate(0deg);}' + '\n';
		txt += ' to {transform:rotate(360deg);}' + '\n';
		txt += '}' + '\n';
	lastStyleElem.innerHTML += txt;
}

.second{
  height: 5px;
  width: 180px;
  background-color: #aaaaaa;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -o-transition: rotate(360deg);
  transform-origin: left center;
  z-index: 3;
}

<button onclick='onStart()'>Start transform</button>
<div class='second'></div>

Aaron Balthaser · Accepted Answer · 2016-06-22 11:06:43Z

I can't think of any reason why this would be done in JavaScript although there might be. I guess if your trying to learn JavaScript learning real world practices might be better. But if you must I suppose you can add it to the head element like so.

var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var props = 
'@-webkit-keyframes spin {' +
  'from {' +
    '-webkit-transform: rotate(0deg);' +
            'transform: rotate(0deg); }' +
  'to {' +
    '-webkit-transform: rotate(360deg);' +
            'transform: rotate(360deg); } }' +
'@keyframes spin {' +
  'from {' +
    '-webkit-transform: rotate(0deg);' +
            'transform: rotate(0deg); }' +
  'to {' +
    '-webkit-transform: rotate(360deg);' +
            'transform: rotate(360deg); } }';
styleElement.appendChild(props);
document.getElementsByTagName("head")[0].appendChild(styleElement);

Nick_O · Accepted Answer · 2016-06-22 11:19:32Z

0

MDN is a great resource, with animation you can declare a lot on one line rather then breaking it up on 5 lines etc

animation: spin 60s infinite linear;

https://developer.mozilla.org/en/docs/Web/CSS/animation

Not sure how you are going to create keyframes in vanilla javascript, but if they are declared in css "spin" will apply the keyframes.

PS if you want to learn Vanilla JavaScript start with a calculator.

answered Jun 22, 2016 at 11:19

Nick_O

4575 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS animation with JavaScript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related