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 💫