Enter Animations
Loading "Add an Enter Animation"
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 π«