Javascript Animate Match CSS Animation

Question

我试图让Javascript动画与我的css动画完全匹配。我不确定为什么这不起作用？我正在尝试使用基本的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 之前应用了动画，并将参数作为列表列表而不是对象列表（如您定义的那样）传递：keyframeslet 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// keyframesvar keyframes = [{&nbsp; backgroundColor: 'green',&nbsp; opacity: 0}, {&nbsp; backgroundColor: 'blue',&nbsp; opacity: 1}];// timing&nbsp;let timing = {&nbsp; duration: 200,&nbsp; iterations: Infinity}div.animate(&nbsp; keyframes,&nbsp; timing);

Answer 2

在动画调用之前移动 。此外，从动画中删除 。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// keyframesvar keyframes = [{&nbsp; backgroundColor: 'green',&nbsp; opacity: 0}, {&nbsp; backgroundColor: 'blue',&nbsp; opacity: 1}];// timing&nbsp;let timing = {&nbsp; duration: 2000,&nbsp; iterations: Infinity}content.append(div)div.animate(&nbsp; keyframes,&nbsp; timing);//elements += html;body {&nbsp; background: #808080;}.base {&nbsp; width: 180px;&nbsp; height: 90px;&nbsp; background: black;}.sample {&nbsp; animation: play 2s steps(10) infinite;}@keyframes play {&nbsp; 0% {&nbsp; &nbsp; background-color: green;&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; opacity: 1;&nbsp; }}<div class='base sample'></div><div id="content"></div>

Answer 3

编辑：替换下面（注意方括号）div.animate([&nbsp; keyframes,&nbsp; timing]);跟：document.getElementById("content").animate(&nbsp; keyframes,&nbsp; timing);这里的工作原理代码片段：（使用JS中的步骤更新）<style>body {&nbsp; background: #808080;}.base {&nbsp; width: 180px;&nbsp; height: 90px;&nbsp; background: black;}.sample {&nbsp; animation: play 2s steps(8) infinite;}@keyframes play {&nbsp; 0% {&nbsp; &nbsp; background-color: green;&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; opacity: 1;&nbsp; }}</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// keyframesvar keyframes = [{&nbsp;backgroundColor: 'green',&nbsp; opacity: 0&nbsp;}, {&nbsp;backgroundColor: 'blue',&nbsp; opacity: 1}];// timing&nbsp;var timing = {&nbsp; duration: 2000,&nbsp; &nbsp;easing: 'steps(8)',&nbsp; iterations: Infinity}