Web 动画 API - 如何在关键帧脚本中使用变量？

Question

I have a simple animation test shown in the code below. This is just for the benefit of demonstrating the issue I'm currently having. If I hard code the hex color values in the keyframes script, everything works fine. For my project I need to be able to override the color values using a variable, you can see in the keyframes code I have replaced a hard coded Hex value with a var called 'markerColor' but as soon as I do this the animation wont run that line item. It will be likely something wrong with the syntax but I cant work out what the solution is, any help would be great thanks.

<header>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"> 
 </script>
</header>


<!-- Set up a target to animate -->
<div class="text-light" style="width: 150px;" id="testDivElement">Hello world!</div>

<script>

 var markerColor;
 var markerAlarmColor;


// THIS IS COMMENTED OT BUT DOES WORK
//// assign keyframes
//var marker1keyframes = [
//    {
//        backgroundColor: '#004A7F',
//        boxShadow: '0 0 10px #004A7F'
//    },
//    {
//        backgroundColor: '#00cc00',
//        boxShadow: '0 0 30px #00cc00'
//    },
//    {
//        backgroundColor: '#004A7F',
//        boxShadow: '0 0 10px #004A7F'
//    }
//];

// THIS IS PART I'M HAVING AN ISSUE WITH
// assign keyframes
var marker1keyframes = [
    {
        backgroundColor: '' + markerColor + '', // not working 
        boxShadow: '0 0 10px #004A7F'
    },
    {
        backgroundColor: '#00cc00',
        boxShadow: '0 0 30px #00cc00'
    },
    {
        backgroundColor: '' + markerColor + '', // not working
        boxShadow: '0 0 10px #004A7F'
    }
];

// assign timings
var marker1timing = {
    duration: 1000,
    fill: "both",
    easing: "ease-in-out",
    iterations: 10,
};

markerColor = "#E6E600";
markerAlarmColor = "#E6E600";

var test = document.getElementById("testDivElement").animate(
        marker1keyframes,
        marker1timing
    )

Answer 1

Turns out I had to declare the variable values before the keyframes script, in the answer below the variables have been moved before the keyframes script, this works for me now.

 <script>

var markerColor = "#E6E600";
var markerAlarmColor = "#E6E600";


// assign keyframes
var marker1keyframes = [
    {
        backgroundColor: '' + markerColor + '',  
        boxShadow: '0 0 10px #004A7F'
    },
    {
        backgroundColor: '#00cc00',
        boxShadow: '0 0 30px #00cc00'
    },
    {
        backgroundColor: '' + markerColor + '', 
        boxShadow: '0 0 10px #004A7F'
    }
];

// assign timings
var marker1timing = {
    duration: 1000,
    fill: "both",
    easing: "ease-in-out",
    iterations: 10,
};

var test = document.getElementById("testDivElement").animate(
        marker1keyframes,
        marker1timing
    )