▸case-01 I am building a landing page hero section with complex 3D zoom and rotate entrance animations. How should I implement these CSS animations while respecting user accessibility preferences for minimal motion? | fail→pass | 16,035 | 13,737 | -14% | 1 | 1 | 0% | 2,931 | 2,521 | -14% | 0 | 0 | — |
▸case-02 I need to construct a side drawer navigation panel that slides smoothly from the left edge of the viewport. Provide CSS transition styles that achieve 60fps performance without layout thrashing. | pass→pass | 12,853 | 13,929 | +8% | 1 | 1 | 0% | 2,417 | 2,721 | +13% | 0 | 0 | — |
▸case-03 I am building a drag-to-dismiss modal card in a React web application. I want the card to snap back naturally with interactive physics when released rather than using a fixed duration timing curve. What transition configuration should I write? | pass→pass | 13,649 | 11,487 | -16% | 1 | 1 | 0% | 2,316 | 1,949 | -16% | 0 | 0 | — |
▸case-04 I am writing custom SCSS styles for a modal overlay and dialog component using a UI motion library. How do I apply built-in slide and fade mixins for enter animations in SCSS? | pass→pass | 14,473 | 10,067 | -30% | 1 | 1 | 0% | 2,602 | 1,959 | -25% | 0 | 0 | — |
▸case-05 I have dynamic list items appearing sequentially on page load. Instead of writing separate hardcoded CSS classes for each item's delay, how should I handle staggered entry delays cleanly in CSS? | pass→pass | 11,971 | 10,726 | -10% | 1 | 1 | 0% | 2,127 | 2,175 | +2% | 0 | 0 | — |
▸case-06 In my React app, a conditional modal disappears instantly when state becomes false, cutting off the exit transition. How do I orchestrate exit animations before DOM removal? | pass→pass | 13,825 | 13,730 | -1% | 1 | 1 | 0% | 2,341 | 2,678 | +14% | 0 | 0 | — |
▸case-07 Reordering cards in a dynamic grid layout causes jarring instant jumps. How should layout position changes be animated efficiently without triggering heavy browser reflows? | pass→pass | 14,449 | 16,104 | +11% | 1 | 1 | 0% | 2,356 | 2,833 | +20% | 0 | 0 | — |
▸case-08 A developer added `will-change: transform, opacity, width, height, top, left` across all elements in a navigation menu to improve performance. How should `will-change` be refactored for optimal memory usage? | fail→fail | 11,903 | 12,624 | +6% | 1 | 1 | 0% | 2,092 | 2,254 | +8% | 0 | 0 | — |
▸case-09 I want to add organic tactile micro-interaction feedback to a primary call-to-action button when users hover and press down. What CSS transform and transition properties should be configured? | pass→pass | 15,322 | 11,107 | -28% | 1 | 1 | 0% | 2,890 | 2,136 | -26% | 0 | 0 | — |
▸case-10 Animating accordion panel expansion from height 0 to dynamic auto height in standard CSS fails to animate. How can I smoothly animate dynamic content expansion using modern CSS without hardcoding pixel heights? | pass→pass | 12,123 | 10,933 | -10% | 1 | 1 | 0% | 2,138 | 2,025 | -5% | 0 | 0 | — |
▸case-11 I want to create a reading progress bar at the top of an article that fills as the user scrolls down the page. How can I implement this in CSS without adding JavaScript scroll event listeners? | pass→pass | 11,519 | 11,717 | +2% | 1 | 1 | 0% | 2,036 | 2,202 | +8% | 0 | 0 | — |
▸case-12 I am building a swipeable notification card. Any slight touch movement currently triggers accidental dismissals. How should I set gesture constraints and trigger thresholds for card dismissal? | fail→pass | 25,345 | 16,536 | -35% | 1 | 1 | 0% | 2,249 | 2,889 | +28% | 0 | 0 | — |
▸case-13 When changing pages in a single-page React app, the outgoing page vanishes instantly before the new page enters. How do I enforce complete exit sequence completion before entering the new view? | pass→pass | 16,001 | 11,826 | -26% | 1 | 1 | 0% | 2,765 | 2,013 | -27% | 0 | 0 | — |
▸case-14 I need a bouncy custom easing curve for a pop-up alert dialog to create an overshoot effect upon entrance. How do I define this custom easing in CSS keyframe transitions? | pass→pass | 31,164 | 11,258 | -64% | 1 | 1 | 0% | 3,633 | 2,163 | -40% | 0 | 0 | — |
▸case-15 Instead of a simple fade in/out pulse for my loading skeleton cards, I want a smooth metallic shimmer highlight moving left to right. How do I build this in CSS? | fail→fail | 14,106 | 19,644 | +39% | 1 | 1 | 0% | 2,812 | 2,969 | +6% | 0 | 0 | — |
▸case-16 Applying active `backdrop-filter: blur(10px)` animations across 50 dynamic feed items causes frame drops during scroll. How should backdrop blur styling be structured to prevent rendering performance issues? | fail→pass | 15,672 | 15,354 | -2% | 1 | 1 | 0% | 2,457 | 2,548 | +4% | 0 | 0 | — |
▸case-17 I am animating an line-art SVG icon to draw itself on scroll using stroke dash properties. How do I determine and configure stroke dash properties for accurate line drawing? | pass→pass | 15,734 | 17,697 | +12% | 1 | 1 | 0% | 2,733 | 2,288 | -16% | 0 | 0 | — |
▸case-18 I have an alert toast appearing at the top-right of the screen. Standard defaults slide it up from the bottom center of the screen. How should entrance direction be oriented for spatial coherence? | pass→pass | 14,923 | 11,445 | -23% | 1 | 1 | 0% | 1,762 | 1,868 | +6% | 0 | 0 | — |
▸case-19 I want seamless cross-document element transitions between multi-page web app pages without writing custom DOM cloning math. What web platform API handles this? | fail→fail | 10,758 | 4,795 | -55% | 1 | 1 | 0% | 1,305 | 827 | -37% | 0 | 0 | — |
▸case-20 A web developer needs to align three cards horizontally with equal spacing between them and vertical center alignment inside a container. Provide the CSS styles for the container element. | pass→pass | 6,658 | 5,812 | -13% | 1 | 1 | 0% | 1,044 | 982 | -6% | 0 | 0 | — |
▸case-21 Create a vanilla JavaScript function that checks if an input string is a valid email address using a standard regex pattern and returns a boolean result. | pass→pass | 6,976 | 5,773 | -17% | 1 | 1 | 0% | 1,163 | 1,165 | +0% | 0 | 0 | — |
▸case-22 Write inline SVG markup for a 24x24 pixel close (X) icon using standard path data and stroke styling. | pass→pass | 6,465 | 4,889 | -24% | 1 | 1 | 0% | 1,218 | 958 | -21% | 0 | 0 | — |
▸case-23 Animating a large complex data tree panel causes global browser re-layout. How can I tell the browser that layout changes inside this panel do not affect outside elements? | fail→pass | 10,966 | 9,942 | -9% | 1 | 1 | 0% | 1,756 | 1,627 | -7% | 0 | 0 | — |
▸case-24 I am building a continuous horizontal ticker text banner. The loop jumps abruptly when restarting keyframes from -100% to 0%. How do I configure keyframe timing and markup for seamless looping? | pass→pass | 12,781 | 14,478 | +13% | 1 | 1 | 0% | 2,243 | 2,599 | +16% | 0 | 0 | — |
▸case-25 I want an image to reveal itself from left to right on hover like an opening curtain, without warping or reflowing the underlying image content. What CSS technique should I use? | pass→pass | 9,878 | 11,433 | +16% | 1 | 1 | 0% | 1,724 | 2,107 | +22% | 0 | 0 | — |