Basic HTML, CSS, JavaScript (Fixed)

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  You can also check the code on how I made my transition in the link below.

  Interactive Rating component

  Marked as helpful

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @min4899 Transitions don't work on display none u can use visibility: hidden and opacity

  • You can also use the @Keyframes [your animation name] to animate your card From{ Transform:translateX(30px); opacity: 0; }

  To { Transform:translateX(0px); opacity: 1; }

  • to activate your animation you can call [animation: your animation name .3s ease]. On an the card

  You can learn more about @keyframes CSS animation on YouTube

  Happy coding💻👍

  Marked as helpful

  1
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution looks great and responsive on smaller devices. Well I suggest you add a transition to the final rating section.

  Besides great job there👍 Have a nice day and a happy coding👍💻

  1

  ---

  

  Minwoo Soh•80

  @min4899Posted over 2 years ago

  @Kamasah-Dickson Ty for the reply! I tried applying a transition when hiding the 1st card and showing the 2nd card, but no animation. I don't think transitions can be applied to "display: none." I'm guessing the solution is use JavaScript to create sequence of timed transitions (card 1 opacity 0 -> display none -> card 2 display -> opacity 100). Is there way to do this using purely CSS? Ty in advance.

  0