title: How to override a CSS class @keyframes property in html
body: <p>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 &amp; box-shadow property of the '@keyframes glowing' in order that I can override the hex color value during the creation of the marker:</p>
  
  <p>CSS Class:</p>
  
  <pre><code> .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
  }
  </code></pre>
  
  <p>Javascript on my razor page:</p>
  
  <pre><code> // 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 &amp; OVERRIDE THE KEYFRAME VALUES
              html: "&lt;div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + ";'&gt;&lt;/div&gt;&lt;i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + ";'&gt;",
              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 &amp; OVERRIDE THE KEYFRAME VALUES
              html: "&lt;div class='marker-pin' style='background:" + markerColorHiddenField + "; --color:" + markerIconBackgroundColorHiddenField + "; width:50px; height:50px; --width:40px; --height:40px; --margin:5px 0 0 5px;'&gt;&lt;/div&gt;&lt;i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'&gt;",
              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 &amp; OVERRIDE THE KEYFRAME VALUES
              html: "&lt;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;'&gt;&lt;/div&gt;&lt;i class='" + fontAwesomeInput + " awesome'style='color:" + markerIconColorHiddenField + "; font-size:30px;'&gt;",
              iconSize: [0, 30],
              iconAnchor: [15, 30]
          });
      }
   }
  </code></pre>