How to override a CSS class @keyframes property in html

Question

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

idontwantnoscrubs · Accepted Answer · 2019-10-17T17:52:54.277

0

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

edited Oct 17 '19 at 17:52

answered Oct 17 '19 at 17:21

idontwantnoscrubs

225
2
14

1

Hi many thanks for your feedback, this is an interesting read. When i try to compile the var 'marker1keyframes' bit in javascript and also using the example from the weblink, I get some squiggly lines under various bits of code, it must be I'm compiling the script incorrectly somewhere. I'll keep working on it... – OJB1 Oct 17 '19 at 17:46
Alright, let me know if you need any further help. It took a little bit for me to get the hang of the API but once you get it working it's very powerful. it's not 100% supported, but look up the polyfill online and it'll work even on IE. – idontwantnoscrubs Oct 17 '19 at 17:48
1

Hi, the issue appears when I insert the 'background-color' OR 'box-shadow' it seems the java-script doesn't like the fact there is a hyphen in between the two words. – OJB1 Oct 17 '19 at 17:51
Wow, my mistake. I forgot to convert the properties to JS format. I just edited my answer – idontwantnoscrubs Oct 17 '19 at 17:52
1

Brilliant thanks. I anticipate a few riddles to solve, one is that each marker added to the map may require different value hex colors, i.e. hard coding the values in the keyframes wont work given the end user may want a different scheme for each marker created. Sure I'll figure something out. – OJB1 Oct 17 '19 at 18:03
You can use variables in place of the hex codes as well, and do calculations. It's just javascript. Here is a codepen of something I did with the API. https://codepen.io/gvolkerding/pen/xxxbdOz – idontwantnoscrubs Oct 17 '19 at 18:32
Something wrong here because I can't even do a basic example using an animated div element, works fine using a fiddle script but on my razor page nothing works at all. Am i missing a reference to the API working for ASP.Net Core 2.2? – OJB1 Oct 17 '19 at 19:40
I have never used this API with razor, nor have I ever used razor. I just assumed that because you could use javascript that this would work for you. You might need the polyfill for it to work, but I'm afraid I can't help past that. – idontwantnoscrubs Oct 17 '19 at 19:53
1

Yep that its mate, I needed to add to the header of my razor page – OJB1 Oct 17 '19 at 20:04
Fantastic, glad to be of help! – idontwantnoscrubs Oct 17 '19 at 23:47

How to override a CSS class @keyframes property in html

1 Answers1