Problem description

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

• Position the panel off-screen with transform: translateX(-100%).

• Define a @keyframes slideIn animation that transitions transform from translateX(-100%) to translateX(0).

• Apply the slideIn animation to the panel with a duration of 0.5s, easing function ease-out, and forwards fill mode to retain its final position.

Goal

Write CSS rules to animate the sidebar panel so it slides into view from the left when the page loads.

Constraints

• Use only CSS (no JavaScript).

• Sidebar width should be 250px.

• Sidebar height should be 100%.

• Position should be fixed at top: 0; left: 0;.

• Initial transform should be translateX(-100%).

• Animation duration should be 0.5s.

• Animation timing should be ease-out.

• Animation fill mode should be forwards.

• Name the keyframes slideIn.

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.