Javascript Сопоставление анимации CSS Анимация

Question

Я пытаюсь добиться, чтобы анимация Javascript точно соответствовала моей анимации css. Я не уверен, почему это не работает? Пытаюсь использовать basi c javascript. не jquery. Второй div должен соответствовать анимации первого 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>

Answer 1

изменить: Заменить ниже (обратите внимание на квадратные скобки)

div.animate([
  keyframes,
  timing
]);

на:

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

Здесь рабочий фрагмент кода: (обновлено с шагами в 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>

Answer 2

Ваша точная проблема в том, что вы применяете анимацию перед добавлением div и передаете аргумент keyframes в виде списка списков вместо списка объектов (как вы его определили):

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

Answer 3

Переместите content.append(div) перед вызовом анимации. Также удалите [] из анимации.

Я разветвил ваш JSFiddle. Вот рабочая версия. 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>