Kevin Powell - Community•2w ago

If 1 element has 2 animations, can I set the play-state for each animation individually?

My question is about CSS and animations: Using only CSS. If i have one element with two animations, is there a way to set the animation-play-state for each animation individually? In my project I've made 2 "buttons" and the goal is that each button sets the animation-play-state of one of the two animations that element has. Thanks!

2 Replies

MarkBoots•2w ago

yea, you can comma seperate them for example https://codepen.io/MarkBoots/pen/KwPVpjw

#square {
  animation: 
    rotate 2s infinite linear var(--rotate, running),
    flip 2s infinite linear var(--flip, paused);
}

@keyframes rotate { to { rotate: 360deg } }
@keyframes flip { to { transform: rotateY(360deg)} }

#square {
  animation: 
    rotate 2s infinite linear var(--rotate, running),
    flip 2s infinite linear var(--flip, paused);
}

@keyframes rotate { to { rotate: 360deg } }
@keyframes flip { to { transform: rotateY(360deg)} }

rotateBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'running');
  square.style.setProperty('--flip', 'paused')
})
flipBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'paused');
  square.style.setProperty('--flip', 'running')
})

rotateBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'running');
  square.style.setProperty('--flip', 'paused')
})
flipBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'paused');
  square.style.setProperty('--flip', 'running')
})

So if you want to do it with js, update the animation-playstate for both. Andwith the use of custom properties, it makes it even easier

NaimusOP•2w ago

Whoa, THANKS for the answer! and the example! I need to try this, just a comma... and i did not use variables yet in css i'll look into it! I'm using only html and css for this thing i'm making, I hope i can make it work anyways!

Gaming

Programming

If 1 element has 2 animations, can I set the play-state for each animation individually?