How to trigger a CSS animation from JS?

Question

I have a balloon that when hovered, will expand n disappear (a popping-like animation). I made this in CSS but when the cursor moves, the balloon returned. I want the balloon to disappear forever until I refresh the page, so I guess it needs to be onclick, but that selector is not available in CSS.

Here's what I have in CSS

@keyframes pop
{
    from{
        opacity:1;
        transform: translateZ(0) scale(1,1);
    }

    to{
        opacity:0;
        transform: translateZ(0) scale(1.5,1.5);
    }
}

.balloon:hover
{
    animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

I saw another question that said the closest thing is :active but it requires the mouse to be held down. If I want it to be onclick, I need to use Javascript. But I don't know what I need to write to trigger the animation.

And is it also possible to make it so that when I pop 1 balloon, all the others will pop too automatically with a 1s delay inbetween? (There are 5 balloons).

Does this answer your question? Trigger CSS Animations in JavaScript — Rob
– Rob, Commented Apr 12, 2020 at 11:09

Tamas Szoke · Accepted Answer · 2020-04-12 11:57:07Z

You can add and remove the class of the animation with JS using classList.

Add:

object.classList.add('balloon');

Remove:

object.classList.remove('balloon');

Working example:

const add = () => {
  document.getElementById('balloon').classList.add('animation')
}

const remove = () => {
  document.getElementById('balloon').classList.remove('animation')
}

@keyframes pop {
  from {
    opacity: 1;
    transform: translateZ(0) scale(1, 1);
  }
  to {
    opacity: 0;
    transform: translateZ(0) scale(1.5, 1.5);
  }
}

.animation {
  animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

.balloon {
  height: 125px;
  width: 110px;
  background-color: #FF6B6B;
  border-radius: 50%;
}

.controls{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

<div id="balloon" class="balloon" onmouseover="add()"></div>
<div class="controls">
  <button onClick="add()">Hide</button>
  <button onClick="remove()">Show</button>
</div>

Banzay · Accepted Answer · 2020-04-12 12:14:36Z

Here is a solution which makes balloons hiding one by one with interval .5s between them

var balloons = document.getElementsByClassName('balloon');
[...balloons].forEach( (e, i)=>{
  e.onmouseover = function() {
    this.classList.add('hidden');
    setTimeout(hideAll, 500, balloons);
    }
});
function hideAll(arg){
    [...arg].forEach( (e, i)=>{
      if ( ! e.classList.contains('hidden') ) {
        e.style.animationDelay = i+'s';
        e.classList.add('hidden');
      }
    });
}

@keyframes pop
{
    from{
        opacity:1;
        transform: translateZ(0) scale(1,1);
    }

    to{
        opacity:0;
        transform: translateZ(0) scale(1.5,1.5);
    }
}

.balloon.hidden
{
    animation: pop .5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}

<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>

Collectives™ on Stack Overflow

How to trigger a CSS animation from JS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related