Problem description

Given an HTML page containing a <div class="shimmer-card"></div> element, write CSS to:

• Style .shimmer-card as a grey placeholder with fixed dimensions and relative positioning.

• Use a ::before pseudo-element to overlay a linear-gradient shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent).

• Position the pseudo-element absolutely to cover the placeholder (top: 0; left: 0; right: 0; bottom: 0;).

• Set background-size: 200% 100%; on the shimmer gradient.

• Define @keyframes shimmer that animates background-position from -200% 0 to 200% 0.

• Apply the shimmer animation to the ::before pseudo-element with a duration of 1.5s, easing ease-in-out, and infinite iteration.

Goal

Write CSS rules to animate the .shimmer-card placeholder so a gradient overlay sweeps across it in a continuous shimmer.

Constraints

• Use only CSS (no JavaScript).

• Placeholder dimensions should be width: 300px; height: 200px;.

• Background color of .shimmer-card should be #e0e0e0.

• Pseudo-element shimmer gradient should be linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent).

• Background-size should be 200% 100%.

• Animation name should be shimmer.

• Animation duration should be 1.5s.

• Animation timing function should be ease-in-out.

• Animation iteration count should be infinite.

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.