Enter Animations
Run locally for transcripts
๐จโ๐ผ Make the logo,
h1 and paragraph fade in and slide from the bottom when the page loads.Keyframes definition
- start at
0%opacity and translated down (Y axis) by20px - end up at
100%opacity and back to its normal position.
Animation utilities
๐จ Create a
slide-up animation in the Tailwind config. It should:- use the
slide-upkeyframes - animate over a duration of
0.3s - use the
ease-outtiming function
Animating elements
๐จ Animate the logo,
h1 and paragraph using the new slide-up animation utilities you have just created.Animation delay
๐จโ๐ผ The logo should start animating immediately when the page loads.
๐จโ๐ผ The
h1 tag should wait 0.3s before starting to animate.๐จโ๐ผ The paragraph should wait
0.8s before starting to animate.๐ฐ Use an ๐ arbitrary property to target the ๐
CSS property responsible to delay the animation.๐ฆ You might notice your delayed animations look wonky. The elements show up in their final position until the delay occurs, and then they go through the
slide-up animation. You should look into the ๐ animation-fill-mode CSS property to work around that โ it can be defined directly in the animation in the Tailwind theme.๐จโ๐ผ You got this! Remember, you'll be considered a hero to the eyes of the design team if you can pull this off ๐ซ