Problem description

Given an HTML page containing a <div class="notification-banner"> element, write CSS to:

• Set its initial opacity to 0.

• Define a @keyframes fadeIn animation that changes opacity from 0 to 1.

• Apply the animation to the banner with a duration of 5s and an easing function ease, and ensure it remains visible after completion.

Goal

Write CSS rules to animate the notification banner so it fades in over one second on page load.

Constraints

• Use only CSS (no JavaScript).

• Initial opacity should be 0.

• Animation duration should be 5s.

• Animation timing should be ease.

• Animation should apply forwards to keep final state.

• Name the keyframes fadeIn.

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.