Как переопределить свойство CSS класса @keyframes в html

Question

У меня есть класс CSS, используемый для рисования маркера leaflet.js. Используя Javascript и форму бритвенной страницы, пользователь создает внешний вид маркера, при создании которого одним из параметров является цвет, которым будет светиться маркер при установке в режим мигания. Исходя из приведенного ниже кода, пока мне удалось изменить общую цветовую схему маркера, но я изо всех сил пытаюсь выяснить, как получить доступ к свойству background-color & box-shadow у «@keyframes glowing», чтобыЯ могу переопределить значение шестнадцатеричного цвета во время создания маркера:

Класс CSS:

 .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 на моей странице бритвы:

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

Answer 1

Взгляните на API веб-анимации. Вы можете вносить изменения в такие вещи, как ключевые кадры, намного проще, чем при использовании только CSS. Например, ваш код будет выполнен так же с 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

вот документация