How Can I Trigger a CSS keyframe animation in pseudo-element with Pure JavaScript?

Question

I have a pseudo-element in my CSS and a keyframe animation I can run it using this:

.bottle:after
    {
        z-index: -500;
        content: "";
        position: absolute;
        bottom: -95%;
        left: -60%;
        height: 130%;
        width: 240%;
        background: blue;
        border-radius: 45%;
        animation: spin 6s ease-in-out;
        animation-fill-mode: forwards;
    }

@keyframes spin 
    {
        0% {transform: translateY(0) rotate(0deg);}
        100% {transform: translateY(-50%) rotate(500deg);}
    }

But I want this animation to be when the button is clicked.

Answer 1

add "active" to the button you want , also it's "::after" not ":after" .

 .button:active::after { z-index: -500; content: ""; position: absolute; bottom: -95%; left: -60%; height: 130%; width: 240%; background: blue; border-radius: 45%; animation: spin 6s ease-in-out; animation-fill-mode: forwards; } @keyframes spin { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-50%) rotate(500deg); } }

Answer 2

See an example below.

 button = document.querySelector(".button"); // Add event listener to button button.addEventListener("click", () => { // Find first element with class = cl bottle = document.querySelector(".cl"); // Add CSS class to first element with class = cl bottle.classList.add("bottle"); });

 .bottle:after { z-index: -500; content: ""; position: absolute; bottom: -95%; left: -60%; height: 130%; width: 240%; background: blue; border-radius: 45%; animation: spin 6s ease-in-out; animation-fill-mode: forwards; } @keyframes spin { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-50%) rotate(500deg); } }

 <div class="cl">Bottle</div> <button class="button">Click</button>

Answer 3

If you really want this with "Pure JavaScript", then have a look at the Web Animation API :

 document.querySelector("button").onclick = (evt) => { // we can't target a pseudo element through DOM // so we target its "owner" const el = document.querySelector(".bottle"); el.animate( [ // keyframes { transform: "translateY(0) rotate(0)" }, { transform: "translateY(-50%) rotate(500deg)" } ], { // settings pseudoElement: "::after", // target the pseudo element duration: 6000, easing: "ease-in-out", fill: "forwards" } ); };

 .bottle:after { z-index: -500; content: ""; position: absolute; bottom: -95%; left: -60%; height: 130%; width: 240%; background: blue; border-radius: 45%; }

 <button>animate</button> <div class="bottle"></div>

Answer 4

An CSS pseudo element :active is what you need, no JavaScript is needed.

.button:active::after {
    content: '';
    position: absolute;
    bottom: -95%;
    left: -60%;
    height: 130%;
    width: 240%;
    background: blue;
    border-radius: 45%;
    animation: spin 6s ease-in-out;
    animation-fill-mode: forwards;
    z-index: -500;
}
@-webkit-keyframes spin {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(0, -50%) rotate(500deg);
    }
}
@keyframes spin {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(0, -50%) rotate(500deg);
    }
}