Room Homepage with Animations

Solution retrospective
I liked the way that I laid out animations:
What challenges did you encounter, and how did you overcome them?@keyframes fadeImage { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeContent { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .fade { &__image { animation: fadeImage 0.5s ease-out; } &__content { animation: fadeContent 0.5s ease-out; } }
I struggled with whether is should use transitions or use keyframe animations. I chose to create keyframe animations for this challenge and it works pretty well.
What specific areas of your project would you like help with?I'm curious if I could accomplish this same result with transitions or if animation keyframes are the way to go.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @anhvu1012
It looks great!
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