Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Staggered Fade-In List Items

Problem: Staggered Fade-In List Items

Try to animate list items so they fade in one after another with a smooth staggered effect using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a list of items:

Write CSS to:

  • Define a @keyframes fadeInUp animation that transitions from opacity: 0; transform: translateY(20px); to opacity: 1; transform: translateY(0); ...