▸case-07 I am building a pricing section with three side-by-side card elements. I want each card to slide up and fade in with a staggered delay without using heavy external frameworks like GSAP or AOS. What custom CSS variable and class pattern should I use? | fail→pass | 14,333 | 9,441 | -34% | 1 | 1 | 0% | 2,637 | 2,098 | -20% | 0 | 0 | — |
▸case-01 I want to add a subtle fade and rise entrance effect to my landing page sections as the user scrolls down. Can you show me how to set up lightweight, framework-free CSS and JavaScript to handle this reveal animation? | fail→pass | 11,557 | 7,576 | -34% | 1 | 1 | 0% | 2,149 | 1,616 | -25% | 0 | 0 | — |
▸case-02 What is a good way to implement scroll-triggered reveal animations for grid items with staggered timing delays, while ensuring it respects user accessibility settings like reduced motion? | fail→pass | 18,673 | 7,393 | -60% | 1 | 1 | 0% | 3,226 | 1,561 | -52% | 0 | 0 | — |
▸case-03 I need a clean, dependency-free code snippet to automatically animate HTML elements into view once when they cross into the viewport. How should I structure the HTML classes and script? | fail→pass | 10,174 | 6,576 | -35% | 1 | 1 | 0% | 1,917 | 1,426 | -26% | 0 | 0 | — |
▸case-04 How do I implement a smooth continuous depth effect where background images translate vertically at a different speed than foreground text while the user scrolls down the page? | pass→pass | 17,779 | 13,085 | -26% | 1 | 1 | 0% | 3,096 | 2,525 | -18% | 0 | 0 | — |
▸case-05 How can I write CSS to make pricing cards lift up slightly and add a box shadow whenever a user hovers their cursor over them? | pass→pass | 8,522 | 4,832 | -43% | 1 | 1 | 0% | 1,508 | 1,003 | -33% | 0 | 0 | — |
▸case-06 What is the standard CSS approach to create a continuous rotating loading indicator icon that spins infinitely inside a submit button during form submission? | pass→pass | 12,212 | 10,346 | -15% | 1 | 1 | 0% | 2,247 | 2,012 | -10% | 0 | 0 | — |
▸case-08 For a project showcase page with a 3x3 photo grid, I want each item to enter the screen with a combined opacity fade and vertical lift motion. How should I configure the HTML attributes and CSS variables for staggered timing without adding external JS dependencies? | fail→pass | 13,034 | 9,753 | -25% | 1 | 1 | 0% | 2,503 | 2,060 | -18% | 0 | 0 | — |
▸case-09 I want to add vertical entrance animations to my landing page content blocks as users scroll down, but my team requires strict compliance with accessibility guidelines for users with vestibular motion disorders. How should the CSS animation code handle reduced motion preferences? | fail→pass | 13,438 | 12,175 | -9% | 1 | 1 | 0% | 2,277 | 2,028 | -11% | 0 | 0 | — |
▸case-10 When building a scroll-based entrance animation for a feature list, I want elements to animate into view the first time they enter the viewport, but remain fully visible and NOT re-trigger when scrolling back up and down. How should the IntersectionObserver callback handle observed elements? | pass→fail | 8,667 | 6,138 | -29% | 1 | 1 | 0% | 1,559 | 1,109 | -29% | 0 | 0 | — |
▸case-11 I have a dynamic blog post feed where new posts appear as the user scrolls. I want to add a light entrance effect where cards fade in while shifting upward. Developers usually use libraries like ScrollReveal or AOS, but I need a native CSS/JS approach. Which CSS class and custom properties should I implement? | fail→pass | 14,798 | 8,827 | -40% | 1 | 1 | 0% | 2,573 | 1,663 | -35% | 0 | 0 | — |
▸case-12 I want my hero section headline, subheadline, and call-to-action button to enter sequentially using CSS transition delays. How should I apply class names and CSS custom properties to manage this sequence cleanly? | fail→pass | 12,940 | 7,137 | -45% | 1 | 1 | 0% | 2,233 | 1,413 | -37% | 0 | 0 | — |
▸case-13 On my marketing page, I have customer testimonial cards that need a staggered fade-and-rise entrance effect when scrolled into view. I usually write custom classes like .delay-100 and .delay-200. What is the clean custom property approach for this? | fail→pass | 12,963 | 10,367 | -20% | 1 | 1 | 0% | 2,272 | 2,114 | -7% | 0 | 0 | — |
▸case-14 How can I animate the columns in my website's footer to smoothly rise and fade into view when the user scrolls to the bottom of the page, ensuring zero external npm package dependencies? | fail→pass | 13,475 | 8,473 | -37% | 1 | 1 | 0% | 2,536 | 1,589 | -37% | 0 | 0 | — |
▸case-15 I want my FAQ accordion items to execute an upward fade transition when they enter the user's viewport. What HTML class name and optional stagger property should I assign to each accordion item? | fail→pass | 9,892 | 2,819 | -72% | 1 | 1 | 0% | 1,861 | 510 | -73% | 0 | 0 | — |
▸case-16 When users scroll down to my key metrics section, four stat counters should enter with a subtle vertical translation and fade-in effect. What class and variable setup should I use to manage this effect? | fail→pass | 12,799 | 7,620 | -40% | 1 | 1 | 0% | 2,616 | 1,432 | -45% | 0 | 0 | — |
▸case-17 I am building an About Us page with team member profile cards. How do I configure scroll-based entrance animations with staggered timing while avoiding heavy animation frameworks? | fail→pass | 16,913 | 10,450 | -38% | 1 | 1 | 0% | 2,931 | 2,190 | -25% | 0 | 0 | — |
▸case-18 In a product comparison table, I want table rows or cards to slide up and fade in as they scroll into view. How do I format the HTML elements with appropriate classes and CSS custom variables? | fail→pass | 13,463 | 9,486 | -30% | 1 | 1 | 0% | 2,523 | 2,106 | -17% | 0 | 0 | — |
▸case-19 I want form fields on a contact page to fade in and rise sequentially as the section comes into view. What is the standard setup for class names and inline custom properties? | fail→pass | 12,412 | 7,184 | -42% | 1 | 1 | 0% | 2,462 | 1,473 | -40% | 0 | 0 | — |
▸case-20 How should I set up a bottom call-to-action banner to perform a single rise-and-fade reveal when scrolled into view, without re-animating on subsequent scroll passes? | fail→pass | 15,312 | 7,030 | -54% | 1 | 1 | 0% | 2,791 | 1,428 | -49% | 0 | 0 | — |
▸case-21 I have a multi-step timeline section with Step 1, Step 2, and Step 3 that should reveal step by step as the user scrolls. What custom property should be set on each step element to adjust the stagger timing? | fail→pass | 9,527 | 2,240 | -76% | 1 | 1 | 0% | 1,598 | 433 | -73% | 0 | 0 | — |
▸case-22 I need a sidebar containing multiple widgets to reveal each widget with a subtle fade and rise when brought into view on mobile devices. What class name and CSS variable structure should be used? | fail→pass | 12,928 | 3,524 | -73% | 1 | 1 | 0% | 2,406 | 638 | -73% | 0 | 0 | — |
▸case-23 A client logo cloud section needs to animate logos into view with slight vertical movement and fading as the section enters the screen. How should I set up the HTML markup and stagger properties? | fail→pass | 16,954 | 9,857 | -42% | 1 | 1 | 0% | 2,881 | 2,128 | -26% | 0 | 0 | — |