Skip to content

Commit ca7dfcd

Browse files
SAPTARSHI-coderSAPTARSHI-coder
authored
Merge pull request #875 from Krish0703-irl/feature/zoom-in-duplicate-fix
fix: add zoom-in duplicate class bug demo (fixes #872)
2 parents 4562c9b + bf26e2b commit ca7dfcd

3 files changed

Lines changed: 167 additions & 0 deletions

File tree

‎submissions/examples/ZoomIn-Duplicate-Fix/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## Zoom-In Duplicate Class Fix Demo
2+
3+
**What does this do?**
4+
Demonstrates the correct `.ease-zoom-in` entrance animation behavior and
5+
exposes a duplicate class definition bug in `core/animations.css`.
6+
7+
**How is it used?**
8+
<div class="ease-zoom-in">I animate in correctly</div>
9+
10+
**Why is it useful?**
11+
`core/animations.css` currently defines `.ease-zoom-in` twice — referencing
12+
two different `@keyframes` blocks with different behavior. The second definition
13+
silently overrides the first via CSS cascade. This demo shows what the correct
14+
behavior should look like (subtle fade+scale from `opacity:0, scale(0.85)`) and
15+
makes the case for removing the dead `@keyframes ease-zoom-in` block and the
16+
duplicate `.ease-zoom-in` class definition at line ~452.
17+
18+
Related issue: #872

‎submissions/examples/ZoomIn-Duplicate-Fix/demo.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>ZoomIn Duplicate Bug Demo</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
11+
<h1 style="font-size:1.25rem; margin-bottom:0;">
12+
.ease-zoom-in — Duplicate Class Bug Demo
13+
</h1>
14+
<p style="color:#94a3b8; font-size:0.85rem; margin-top:0.25rem;">
15+
Both cards use different keyframes. Only one should exist.
16+
</p>
17+
18+
<div class="card zoom-in-correct" id="card-correct">
19+
<div class="label">Current behavior (wins via cascade)</div>
20+
<h2>ease-kf-zoom-in</h2>
21+
<p>opacity: 0 → 1, scale: 0.85 → 1</p>
22+
<span class="badge-green">✓ Keep this</span>
23+
</div>
24+
25+
<div class="card zoom-in-dead" id="card-dead">
26+
<div class="label">Dead code (never reaches user)</div>
27+
<h2>ease-zoom-in (orphaned)</h2>
28+
<p>scale: 0 → 1, no opacity, hardcoded 0.6s</p>
29+
<span class="badge-red">✗ Remove this</span>
30+
</div>
31+
32+
<button onclick="replay()">↺ Replay Animations</button>
33+
34+
<script>
35+
function replay() {
36+
const cards = document.querySelectorAll('.card');
37+
cards.forEach(card => {
38+
card.style.animation = 'none';
39+
card.offsetHeight;
40+
card.style.animation = '';
41+
});
42+
}
43+
</script>
44+
45+
</body>
46+
</html>

‎submissions/examples/ZoomIn-Duplicate-Fix/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@keyframes zoom-in-correct {
2+
from {
3+
opacity: 0;
4+
transform: scale(0.85);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: scale(1);
9+
}
10+
}
11+
12+
@keyframes zoom-in-dead {
13+
from {
14+
transform: scale(0);
15+
}
16+
to {
17+
transform: scale(1);
18+
}
19+
}
20+
21+
.zoom-in-correct {
22+
animation: zoom-in-correct 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
23+
}
24+
25+
.zoom-in-dead {
26+
animation: zoom-in-dead 0.6s ease-out forwards;
27+
}
28+
29+
body {
30+
font-family: system-ui, sans-serif;
31+
background: #0f172a;
32+
color: #f1f5f9;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
justify-content: center;
37+
min-height: 100vh;
38+
gap: 2rem;
39+
padding: 2rem;
40+
}
41+
42+
.card {
43+
background: #1e293b;
44+
border: 1px solid #334155;
45+
border-radius: 12px;
46+
padding: 2rem 2.5rem;
47+
text-align: center;
48+
width: 300px;
49+
}
50+
51+
.label {
52+
font-size: 0.75rem;
53+
color: #94a3b8;
54+
margin-bottom: 0.5rem;
55+
text-transform: uppercase;
56+
letter-spacing: 0.05em;
57+
}
58+
59+
.badge-green {
60+
display: inline-block;
61+
background: #15803d;
62+
color: #86efac;
63+
font-size: 0.75rem;
64+
padding: 2px 10px;
65+
border-radius: 999px;
66+
margin-top: 0.75rem;
67+
}
68+
69+
.badge-red {
70+
display: inline-block;
71+
background: #991b1b;
72+
color: #fca5a5;
73+
font-size: 0.75rem;
74+
padding: 2px 10px;
75+
border-radius: 999px;
76+
margin-top: 0.75rem;
77+
}
78+
79+
button {
80+
margin-top: 2rem;
81+
padding: 0.6rem 1.5rem;
82+
background: #6c63ff;
83+
color: white;
84+
border: none;
85+
border-radius: 8px;
86+
cursor: pointer;
87+
font-size: 0.9rem;
88+
}
89+
90+
button:hover {
91+
background: #4b44cc;
92+
}
93+
94+
h2 {
95+
font-size: 1rem;
96+
margin: 0 0 0.25rem;
97+
}
98+
99+
p {
100+
font-size: 0.8rem;
101+
color: #94a3b8;
102+
margin: 0;
103+
}

0 commit comments

Comments
 (0)