Astro, WCAG Accessibility, CSS Animations & Vanilla JavaScript

Thanks @legion40216! 😃 I'm happy to explain, here's how I did this:

I'm setting the initial CSS properties of what will be added inside these div's:

<div class="player__choice"></div>
<div class="computer__choice"></div>

To this:

[class*="__choice"] > * {
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

And whenever the user initiates a game I use the following JavaScript to change the CSS properties, including a setTimeout function to add the delay in animations:

setTimeout(() => { 
  playerChoiceDisplay.firstElementChild.style.opacity = '1' 
  playerChoiceDisplay.firstElementChild.style.transform = 'scale(1)' 
}, 500)
setTimeout(() => { 
  computerChoiceDisplay.firstElementChild.style.opacity = '1'
  computerChoiceDisplay.firstElementChild.style.transform = 'scale(1)'
}, 1000)

Hope this helps 🙂

PS: I really like your take on it by adding that "Best of three" at the top!

Kudos bro thank you for the help, keep up the impressive work.

Thanks @NohaaAa! 😊

@Haripriya2004 thanks for taking a look at my solution! 😊 What are your viewport dimensions if I may ask? It does need some scrolling if the height of your screen becomes smaller, but maybe there's an other bug at play here 🤔