How to override a CSS class @keyframes property in html

I have a CSS class used for drawing a leaflet.js marker. Using Javascript and a razor page form, the user designs the appearence of the marker during its creation of which one of the parameters is what the color the marker will glow with when set to flashing mode. From the code below, so far I have been able to change the general color scheme of the marker but I'm struggling to figure out how to access the background-color & box-shadow property of the '@keyframes glowing' in order that I can override the hex color value during the creation of the marker:

CSS Class:

 .marker-pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #c30b82;
position: absolute;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
animation: glowing 1000ms infinite;
}

/* to draw white circle */
.marker-pin::after {
    content: '';
    width: var(--width, 24px);
    height: var(--height, 24px);
    margin: var(--margin, 3px 0 0 3px);
    background: var(--color, white);
    position: absolute;
    border-radius: 50%;
    }

/* to align icon */
    .custom-div-icon i {
position: absolute;
width: 22px;
font-size: 22px;
left: 0;
right: 0;
margin: 10px auto;
text-align: center;
}

.custom-div-icon i.awesome {
    margin: 12px auto;
    font-size: 17px;
    color: #000000;
}

@keyframes glowing {
0% {
    background-color: #004A7F; // I need to change this value for each marker in HTML script below
    box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below
}

50% {
    background-color: #00cc00; // I need to change this value for each marker in HTML script below
    box-shadow: 0 0 30px #00cc00; // I need to change this value for each marker in HTML script below
}

100% {
    background-color: #004A7F; // I need to change this value for each marker in HTML script below
    box-shadow: 0 0 10px #004A7F; // I need to change this value for each marker in HTML script below
}

Javascript on my razor page:

 // Function adds the marker to the center of the map.
function addMarkerToMap() {

    var id = document.getElementById("markerNameInput").value;

    if (id == "") {
        alert("Marker Name is missing! \nPlease complete the required field");
        return;
    }

    // If the marker id already exists, throw error.
    var found = componentList.includes(id);
    if (found == true) {
        alert("Marker ID already exists! \nPlease choose another one");
        return;
    }

    var markerColorHiddenField = document.getElementById("markerColorHiddenField").value;
    var markerIconColorHiddenField = document.getElementById("markerIconColorHiddenField").value;
    var markerIconBackgroundColorHiddenField = document.getElementById("markerIconBackgroundColorHiddenField").value;
    var markerAlarmColorHiddenField = document.getElementById("markerAlarmColorHiddenField").value;
    var fontAwesomeInput = document.getElementById("fontAwesomeInput").value;
    var markerSizeSelect = document.getElementById("markerSizeSelect").value;

    if (markerSizeSelect == "Standard") {
        // Create the marker using the custom class and design
        // parameters from the user selection.
        icon = L.divIcon({
            className: 'custom-div-icon',

            // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
            html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + ";'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + ";'>",
            iconSize: [30, 42],
            iconAnchor: [15, 42]
        });

    } else if (markerSizeSelect == "Large") {
        // Create the marker using the custom class and design
        // parameters from the user selection.
        icon = L.divIcon({
            className: 'custom-div-icon',

            // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
            html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:50px; height:50px; --width:40px; --height:40px; --margin:5px 0 0 5px;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
            iconSize: [9, 34],
            iconAnchor: [15, 34]
        });
    } else if (markerSizeSelect == "X-Large") {
        // Create the marker using the custom class and design
        // parameters from the user selection.
        icon = L.divIcon({
            className: 'custom-div-icon',

            // HELP HELP HELP - THIS LINE BELOW IS WHERE I NEED TO ACCESS & OVERRIDE THE KEYFRAME VALUES
            html: "<div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:60px; height:60px; --width:50px; --height:50px; --margin:5px 0 0 5px; background-color:#00cc00;'></div><i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'>",
            iconSize: [0, 30],
            iconAnchor: [15, 30]
        });
    }
 }

Take a look at the Web Animation API. You are able to make changes to things like keyframes much easier than with using just CSS. For example your code would be executed like this with the API.

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

// 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'
}
];

// call the animation
var glowingMarker1 = document
    .getElementById("#yourID")
    .animate(marker1timing, marker1keyframes);

// pauses the animation until it is needed to run
glowingMarker1.pause();

// use glowingMarker1.play() inside an event handler to make the animation happen

here is the documentation