Skip to content
Submitted about 4 years ago

RPS JS Game with HTML/CSS/JS

Tarek Mo•365
@tarek-mo
A solution to the Rock, Paper, Scissors game challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, I have a question.. How do you animate in CSS when switching from display: none to let's say display: block . To get around this I used to use visibility instead. But the problem with visibility is that the element still takes place even that it's hidden to the user and that's not what I want... Thanks for viewing my solution ^^

Code

Please log in to post a comment

Log in

Community feedback

  • Faris P•2,810
    @FarisPalayi

    Yes, @claudiabdm is right. You can't animate the display property. But, you could give a delay before display: none; and run whatever animation you want to run before the delay with the help of the setTimeout() method using javascript.

    Marked as helpful
  • Claudia Benito•75
    @claudiabdm

    Hi!

    I think there is no possible way to animate from display: none to any other display value only with CSS so you could try with the height property.

    You can check this codepen I made with a very simple example: https://codepen.io/claudiabdm/pen/ExWBpZX.

    Hope it helps!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord