HOW TO CHANGE & OVERRIDE CSS IN JAVASCRIPT

[{"selector":"#anim-f575561d-f6a9-48a1-8700-d92062b341ee","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-54c97902-c268-4fb8-852f-f560fc5ffabd","keyframes":{"transform":["rotate(-360deg) translate3d(0px, 181.00509%, 0) rotate(360deg)","rotate(-360deg) translate3d(0px, 0px, 0) rotate(360deg)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c5a9ce4-2e88-4c0c-b391-a597a71af91a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1aaa4d6d-3a40-49e3-b484-869eae186233","keyframes":{"transform":["translate3d(0px, -700.61766%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CSS JS

SET CSS INLINE STYLE

[{"selector":"#anim-4e84cd46-b120-4340-9a73-37fddc2b2909","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b0f3c300-e189-48ed-ad8d-79ef18d87027","keyframes":{"transform":["translate3d(-114.77988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Hello document.getElementById("demoA") .style.color = "Red"; 01

SET CSS TEXT

[{"selector":"#anim-c190dc9f-6917-4ae3-a5f0-05ebbcfcc272","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5784aa74-1c3b-4c41-b35e-1c146a9b4f33","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Hello document.getElementById("demoB") .style.cssText = "color: red; font-weight: bold;"; 02

SET STYLE ATTRIBUTE

[{"selector":"#anim-8eb384b6-bb0e-47e4-86cc-63528e84fb3a","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b05802da-758d-4e40-854c-f5d6a5aaa876","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f4a54ec-00be-4ee8-a7d9-837979993dec","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Hello document.getElementById("demoC") .setAttribute ("style", "color: red; font-weight: bold;"); 03

SET CSS CLASS

[{"selector":"#anim-473e6ab3-8c81-4dda-87a3-006c063bd731","keyframes":{"transform":["translate3d(114.77986%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f21ac654-7488-4caf-999e-2f88b0306f78","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cf1b7245-4928-4b97-8179-1930040fbe92","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] .demo { color: red; } Hello document.getElementById("demoD") .className = "demo"; 04

SET CSS VARIABLE

[{"selector":"#anim-81acbf6e-8c4b-406e-a2e3-1ff3f10c53ac","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] :root { --textcol: red; } .demo { color: var(--textcol); } Hello document.documentElement.style. setProperty ("--textcol", "blue"); 05

FULL TUTORIAL

[{"selector":"#anim-043fca8c-0fd8-42f7-8f34-47aadf114df5","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-b107d4f2-4e4d-451e-8c46-1b3505c8d1fd","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-835bcb83-57c9-4855-a166-6f6173cec6fc","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]