CSS Animations and Transitions

Help Max, the owner of My Little Cookie Shop, sharpen his competitive edge. He’s hired you to upgrade his store’s website with hovers. Using the provided design file as your guide for what each state should look like, you’ll ensure the user can easily see what’s clickable and provide a smooth transition from one state to another. You can use the provided HTML and base CSS, but you’re welcome to deviate from that if you’d like to get more creative.

Bring My Little Cookie Shop’s logo to life.The website already looks pretty nice, but Max, the owner, has hired you to sweeten it even more. Using keyframes and CSS properties within the SVG code itself, you’ll animate the logo with blinking stars and rotating text, then create the illusion of drawing a path. The logo includes two thin circles around a central design; you will make it look like those circles are being drawn and erased as the animation loops.

My Little Cookie Shop’s website looks pretty nice, but there’s a problem with an accordion feature on the store’s page. Instead of allowing the user to expand or collapse pastry categories, the content abruptly appears and vanishes. To make sure Max’s competitive edge doesn’t vanish, too, you’ll make the sections glide open and close, as well as fix an arrow’s rotation problems, using CSS and JavaScript. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.

Max, the owner of My Little Cookie Shop, wants to take his online menu from meh to marvelous. Using CSS, you’ll style and animate the pastry pictures so that they flip around when clicked, revealing the details on the back, just like a real-world, three-dimensional card. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.