Skip to content

Using CSS animation

jackdarker edited this page Feb 22, 2021 · 1 revision

CSS-animations usual fire when a page is loaded.
F.e. the following is an excerpt from a css. The css-class div_alarm can be assigned to a html-element that will then execute the animation alarm once (change background to oral and back to initial setting).
.div_alarm {animation: alarm 1s;}
@keyframes alarm {
0% {
background-color: initial;
}
50% {
background-color: coral;
}
100% {
background-color: initial;
}
}

But maybe you want to run the animation programatically.
The following function will remove and add a css-class to a <div id="choice"> which will trigger the animation.
Note the workaround with offsetWidth.
window.gm.defaultPostBuy =function(itemid,cost){
$("div#choice")[0].innerHTML='You bought '+ itemid;
$("div#choice")[0].classList.remove("div_alarm");
$("div#choice")[0].offsetWidth; //this forces the browser to notice the class toggle
$("div#choice")[0].classList.add("div_alarm");
};

Clone this wiki locally