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>Motion Anti-Patterns — Should Flag vs Should Pass</title>
7 <style>
8 /* ─── Two-column fixture convention ─────────────────────────────
9 Left column = should flag. Right column = should pass.
10 Tests assert (a) every flag-column rule fires and (b) the total
11 finding count matches the number of flag cases (no false
12 positives leaking from the pass column).
13 ──────────────────────────────────────────────────────────── */
14 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }
15 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
16 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
17 .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
18 .demo { padding: 14px 16px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 10px; }
19 .demo h4 { font-weight: 600; font-size: 13px; margin: 0; }
20 .demo p { font-size: 12px; color: #6b7280; margin: 4px 0 0; }
21
22 /* ── FLAG: bounce / elastic easing ── */
23 @keyframes bounce-keyframe {
24 0%, 100% { transform: translateY(0); }
25 50% { transform: translateY(-10px); }
26 }
27 .bounce-animation { animation: bounce-keyframe 1s infinite; }
28 .elastic-transition { transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
29
30 /* ── FLAG: layout property transitions ── */
31 .width-transition { transition: width 0.3s ease; }
32 .height-transition { transition: height 0.4s ease-out; }
33 .padding-transition { transition: padding 0.2s linear; }
34 .margin-transition { transition: margin 0.3s ease-in; }
35 .max-height-transition { transition: max-height 0.5s ease; }
36 .multi-layout-transition { transition: width 0.3s ease, height 0.3s ease; }
37 .mixed-transition { transition: width 0.3s ease, opacity 0.3s ease; }
38 .transition-property-width { transition-property: width; transition-duration: 0.3s; }
39
40 /* ── PASS: good easing ── */
41 @keyframes fade-in-keyframe {
42 from { opacity: 0; transform: translateY(8px); }
43 to { opacity: 1; transform: translateY(0); }
44 }
45 .fade-in-good { animation: fade-in-keyframe 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
46 .ease-out-quart { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
47 .ease-out-expo { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
48
49 /* ── PASS: safe transitions ── */
50 .transform-transition { transition: transform 0.3s ease-out; }
51 .opacity-transition { transition: opacity 0.2s ease; }
52 .color-transition { transition: color 0.15s ease, background-color 0.15s ease; }
53 .shadow-transition { transition: box-shadow 0.2s ease; }
54 .all-transition { transition: all 0.3s ease; }
55 .multi-safe-transition { transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease; }
56 </style>
57</head>
58<body>
59 <div class="grid">
60 <!-- ════════════════════════════════════════════════════════════
61 LEFT COLUMN: should flag
62 ═══════════════════════════════════════════════════════════ -->
63 <div class="col" data-col="flag">
64 <h2>Should flag</h2>
65
66 <h3>Bounce / elastic easing</h3>
67 <div class="demo bounce-animation">
68 <h4>CSS bounce animation</h4>
69 <p>animation: bounce 1s infinite</p>
70 </div>
71 <div class="demo elastic-transition">
72 <h4>Elastic cubic-bezier</h4>
73 <p>cubic-bezier(0.68, -0.55, 0.265, 1.55)</p>
74 </div>
75
76 <h3>Layout property transitions</h3>
77 <div class="demo width-transition">
78 <h4>transition: width</h4>
79 <p>Animating width causes layout thrash.</p>
80 </div>
81 <div class="demo height-transition">
82 <h4>transition: height</h4>
83 <p>Animating height causes layout thrash.</p>
84 </div>
85 <div class="demo padding-transition">
86 <h4>transition: padding</h4>
87 <p>Animating padding causes layout thrash.</p>
88 </div>
89 <div class="demo margin-transition">
90 <h4>transition: margin</h4>
91 <p>Animating margin causes layout thrash.</p>
92 </div>
93 <div class="demo max-height-transition">
94 <h4>transition: max-height</h4>
95 <p>Use grid-template-rows instead.</p>
96 </div>
97 <div class="demo multi-layout-transition">
98 <h4>transition: width, height</h4>
99 <p>Multiple layout properties.</p>
100 </div>
101 <div class="demo mixed-transition">
102 <h4>transition: width, opacity</h4>
103 <p>Layout property mixed with OK property.</p>
104 </div>
105 <div class="demo transition-property-width">
106 <h4>transition-property: width</h4>
107 <p>Longhand form.</p>
108 </div>
109 </div>
110
111 <!-- ════════════════════════════════════════════════════════════
112 RIGHT COLUMN: should pass
113 ═══════════════════════════════════════════════════════════ -->
114 <div class="col" data-col="pass">
115 <h2>Should pass</h2>
116
117 <h3>Good easing</h3>
118 <div class="demo fade-in-good">
119 <h4>Smooth fade in</h4>
120 <p>animation: fadeIn with exponential ease-out</p>
121 </div>
122 <div class="demo ease-out-quart">
123 <h4>Ease-out quart</h4>
124 <p>cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration</p>
125 </div>
126 <div class="demo ease-out-expo">
127 <h4>Ease-out expo</h4>
128 <p>cubic-bezier(0.16, 1, 0.3, 1) — natural feel</p>
129 </div>
130
131 <h3>Safe transitions (transform / opacity / color only)</h3>
132 <div class="demo transform-transition">
133 <h4>transition: transform</h4>
134 <p>Transform is GPU-accelerated and safe.</p>
135 </div>
136 <div class="demo opacity-transition">
137 <h4>transition: opacity</h4>
138 <p>Opacity is GPU-accelerated and safe.</p>
139 </div>
140 <div class="demo color-transition">
141 <h4>transition: color, background-color</h4>
142 <p>Color transitions are paint-only, no layout.</p>
143 </div>
144 <div class="demo shadow-transition">
145 <h4>transition: box-shadow</h4>
146 <p>Shadow transitions are paint-only.</p>
147 </div>
148 <div class="demo all-transition">
149 <h4>transition: all</h4>
150 <p>Too common to flag — usually paired with transform/opacity.</p>
151 </div>
152 <div class="demo multi-safe-transition">
153 <h4>transition: transform, opacity, box-shadow</h4>
154 <p>Multiple safe properties combined.</p>
155 </div>
156 </div>
157 </div>
158 <script src="/js/detect-antipatterns-browser.js"></script>
159</body>
160</html>