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

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.

CodePudding user response：

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

CodePudding user response：

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 >Bottle</div>
<button >Click</button>

CodePudding user response：

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 ></div>

CodePudding user response：

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