transition behavior allow discrete
All collections tagged with "transition behavior allow discrete"
24 CSS Animated Cards
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
20 CSS Social Buttons
20 hand-coded CSS social buttons for blogs, SaaS marketing pages, e-commerce product pages, creator bio pages and support widgets. Covers inline SVG brand marks with no icon font, brand-colour fill on hover, accessible icon-only circles with visually-hidden labels, CSS tooltips that open on hover and focus, the Web Share API with a working fallback menu, prefilled intent URLs, live share counts with tabular figures, copy-link feedback, standalone sign-in button sets, follow toggles, Linktree-style bio link stacks, e-commerce share rows with wishlist, direct-message contact cards, and a theme-aware token system whose light and dark switch runs on pure CSS.
22 CSS Transitions
22 hand-coded CSS transition patterns covering the transition property and its longhands, timing functions including linear() springs and cubic-bezier, delay choreography that reverses on exit, compositor-thread transforms, scale without layout shift, gradient interpolation via registered custom properties, border and outline transitions without reflow, transition-behavior allow-discrete for display none, focus-within parent state, height auto with interpolate-size, @starting-style entry transitions, view-transition names and pseudo elements, data-attribute state machines, transform-origin underlines, @property interpolation, :has() sibling transitions, backdrop-filter cost, index-driven staggered delay, transition all versus explicit property lists, interruption and reverse playback, discrete property behaviour, and a reduced-motion strategy. 19 demos are pure CSS; 3 use vanilla JavaScript.