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);.

• Apply fadeInUp to each <li> with a duration of 0.6s, easing ease-out, and forwards fill mode.

• Use :nth-child(n) selectors to assign increasing animation-delay (e.g., 0s, 0.2s, 0.4s, etc.) to each list item.

Goal

Write CSS rules to animate each <li> item so they fade in and slide up one after another with a consistent delay.

Constraints

• Use only CSS (no JavaScript).

• List items initial opacity should be 0; transform should be translateY(20px).

• Animation name should be fadeInUp.

• Animation duration should be 0.6s.

• Animation timing function should be ease-out.

• Animation fill mode should be forwards.

• Delay increments should be 0.2s for each subsequent list item.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.