fix: replace background-position with translate in skeleton shimmer for smoother HiDPI rendering (#1351)

[Pcmhacker-piro]

Closes #1351

Pull Request Description

The ease-skeleton-shimmer animation stutters on Retina displays when the container has an odd pixel width. background-position animation produces sub-pixel values that browsers round inconsistently each frame, causing visible jitter. The fix uses translate on a ::before pseudo-element — a GPU-composited property that handles sub-pixel values smoothly.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/your-feature-name/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

Note: Unchecking the core/ box is intentional — the bug lives in core/animations.css. This fix changes only the keyframe and skeleton-shimmer class.

---

Feature Description

What does this fix?

Replaces background-position animation with translate on a ::before pseudo-element to eliminate sub-pixel judder on HiDPI displays.

How does a developer use it?

<div class="ease-skeleton-shimmer" style="width: 375px; height: 20px; border-radius: 4px;"></div>
Usage is unchanged — just include ease-skeleton-shimmer as before. The shimmer now renders smoothly on Retina displays.
Why does it fit EaseMotion CSS?
Skeleton loaders are a fundamental UX pattern, and the shimmer effect should be polished across all display densities. Using translate (a composited property) instead of background-position keeps the animation GPU-accelerated and aligns with EaseMotion's performance-conscious, animation-first philosophy.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
The shimmer overlay uses rgba(255, 255, 255, 0.35) to blend naturally over any base background color, making it more versatile than the previous hardcoded color gradient. The translate property requires Chrome 104+, Firefox 108+, Safari 16+ — all well within current browser support.
Closes #1351

[github-actions]

📊 CSS Bundle Size Benchmark

This PR changes the size of easemotion.min.css.

Metric	Base Branch	This PR	Difference
Raw	47.43 KB	47.45 KB	📈 +0.02 KB
Gzip	8.34 KB	8.34 KB	📈 +0.01 KB
Brotli	7.13 KB	7.13 KB	📉 -0.00 KB

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check thsi