Javascript Animate Matching CSS Animation

Question

I'm trying to get the Javascript animation to match exactly my css animation. I'm not sure why this is not working? I'm trying to use basic javascript. not jquery. The second div should be matching the animation of the first div

https://jsfiddle.net/JokerMartini/pf2nt4su/

let content = document.getElementById("content");

html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
  backgroundColor: 'green',
  opacity: 0
}, {
  backgroundColor: 'blue',
  opacity: 1
}];
// timing 
let timing = {
  duration: 2000,
  iterations: Infinity
}

div.animate([
  keyframes,
  timing
]);

//elements += html;
content.append(div)

body {
  background: #808080;
}

.base {
  width: 180px;
  height: 90px;
  background: black;
}

.sample {
  animation: play 2s steps(10) infinite;
}

@keyframes play {
  0% {
    background-color: green;
    opacity: 0;
  }

  100% {
    background-color: blue;
    opacity: 1;
  }
}

<div class='base sample'></div>
<div id="content"></div>

You have an error here: opacity: 1;, you should remove the ;. I am not sure if it's related to your issue — Manuel Abascal
– Manuel Abascal, Commented May 6, 2020 at 20:15

Jawad Khan · Accepted Answer · 2020-05-06 23:06:21Z

1

edit: Replace below (notice square brackets)

div.animate([
  keyframes,
  timing
]);

with:

document.getElementById("content").animate(
  keyframes,
  timing
);

Here working code snippet: (updated with steps in JS)

<style>
body {
  background: #808080;
}

.base {
  width: 180px;
  height: 90px;
  background: black;
}

.sample {
  animation: play 2s steps(8) infinite;
}

@keyframes play {
  0% {
    background-color: green;
    opacity: 0;
  }

  100% {
    background-color: blue;
    opacity: 1;
  }
}
</style>

<div class='base sample'></div> <br>
<div id="content" class="base"></div>
<script>
let content = document.getElementById("content");

html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
 backgroundColor: 'green',
  opacity: 0 
}, {
 backgroundColor: 'blue',
  opacity: 1
}];
// timing 
var timing = {
  duration: 2000,
   easing: 'steps(8)',
  iterations: Infinity
}



document.getElementById("content").animate(
  keyframes,
  timing
);



</script>

edited May 6, 2020 at 23:06

answered May 6, 2020 at 20:34

Jawad Khan

3411 silver badge7 bronze badges

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

3 Comments

JokerMartini Over a year ago

in the css im setting a 'steps' value. how do i do that in the javascript

Jawad Khan Over a year ago

yes you can do that as well. I will update the code now

Jawad Khan Over a year ago

@JokerMartini please check now

Joshua Rose · Accepted Answer · 2020-05-06 20:45:18Z

0

Move the content.append(div) before the animate call. Also, remove the [] from the animate.

I forked your JSFiddle. Here is a working version. https://jsfiddle.net/jrgiant/c5z7x2bu/.

let content = document.getElementById("content");

html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
  backgroundColor: 'green',
  opacity: 0
}, {
  backgroundColor: 'blue',
  opacity: 1
}];
// timing 
let timing = {
  duration: 2000,
  iterations: Infinity
}
content.append(div)
div.animate(
  keyframes,
  timing
);

//elements += html;

body {
  background: #808080;
}

.base {
  width: 180px;
  height: 90px;
  background: black;
}

.sample {
  animation: play 2s steps(10) infinite;
}

@keyframes play {
  0% {
    background-color: green;
    opacity: 0;
  }

  100% {
    background-color: blue;
    opacity: 1;
  }
}

<div class='base sample'></div>
<div id="content"></div>

answered May 6, 2020 at 20:45

Joshua Rose

3903 silver badges11 bronze badges

1 Comment

JokerMartini Over a year ago

in the css im setting a 'steps' value. how do i do that in the javascript

Dostrelith · Accepted Answer · 2020-05-06 20:50:08Z

0

Your exact problem is that you are applying the animation before appending the div, and passing the keyframes argument as a list of lists instead of a list of objects (as you defined it):

let content = document.getElementById("content");

html = `<div class="base"></div>`;
let doc = new DOMParser().parseFromString(html, 'text/html');
let div = doc.body.firstChild;
content.append(div)


// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
// keyframes
var keyframes = [{
  backgroundColor: 'green',
  opacity: 0
}, {
  backgroundColor: 'blue',
  opacity: 1
}];
// timing 
let timing = {
  duration: 200,
  iterations: Infinity
}

div.animate(
  keyframes,
  timing
);

answered May 6, 2020 at 20:50

Dostrelith

9726 silver badges14 bronze badges

1 Comment

JokerMartini Over a year ago

in the css im setting a 'steps' value. how do i do that in the javascript

Collectives™ on Stack Overflow

Javascript Animate Matching CSS Animation

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related