Kamasah-Dickson• 5,590
@Kamasah-Dickson
Posted
You can also check the code on how I made my transition in the link below.
Marked as helpful
1
Design comparison
Solution retrospective
2nd Attempt after feedback. Fixed issues from 1st attempt.
Community feedback
Kamasah-Dickson• 5,590
@Kamasah-Dickson
Posted
@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-Dickson
Posted
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
@min4899
Posted
@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
Please log in to post a comment
Log in with GitHub
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