179 CSS @keyframes Examples (Page 2)

A hypnotic, kaleidoscopic loader where white dots decompose into their RGB constituents during motion, generating a sensation of energy and complexity.

A playful button that shakes, reddens, and “curses” with increasing intensity upon each click (or hover for the secondary button), visualizing a gradual loss of composure.

A playful, tactile toggle switch where the container seemingly ‘spits out’ or lobs the indicator ball to the opposing side.

A dynamic field of black dots moving synchronously yet phase-shifted in time, forming complex geometric patterns reminiscent of moiré.

A volumetric 3D toggle switch orchestrated via the CSS Checkbox Hack and sibling combinators, requiring minimal JavaScript. The segmented background creates a cascading flip effect using rotateX and inline transition-delay, while keyframes drive two spheres in a complex orbital path through depth using translateZ and perspective to swap positions.

This interactive grid showcases a mesmerizing “gooey” or “metaball” effect, achieved by applying an SVG filter to a liquid-like blob that smoothly follows the cursor. The entire experience is powered by a sophisticated combination of technologies: requestAnimationFrame for the performant cursor tracking, and SCSS using @for loops and custom functions to create unique, non-repeating @keyframes for each block’s animation.

This demo creates a captivating liquid wave illusion using a single ::before pseudo-element inside multiple overflow: hidden containers. The fluid motion is the result of two simultaneous @keyframes animations - one controlling top and the other transform: rotateZ.

This demo is a showcase of Splitting.js, a library that splits HTML elements into granular parts for detailed animation. The “Course Clear” heading is split into individual characters, and a grid overlay is created with data-splitting="cells", allowing for complex, staggered animations on each part.

This cinematic hero section employs Vue.js reactivity to orchestrate a continuous background image rotation system, where cat photos dynamically swap with sequenced enter/exit animations while geometric typography skews dramatically above.

A dual-panel form where JS acts as a simple state trigger, using classList.toggle to apply .animate classes. The entire complex transition is driven by CSS @keyframes, which choreograph separate transform and z-index animations for content and a background image.

An elegant slider where the entire scrolling logic is built not on transforms, but on DOM manipulation. JavaScript uses appendChild and prepend to reorder the elements, and CSS instantly picks up the changes via :nth-child and transition to create a smooth, cascading effect.

Sass Generator uses @for loops and the random() function to bulk-create 350 unique snowflake CSS classes in three sizes. This pure CSS solution for snowfall combines fall (movement with rotation) and flickr (opacity blinking) animations, utilizing vw and vh in keyframes for realistic chaotic motion and responsiveness without using JavaScript.

This is a pure CSS toggle switch, utilizing :before and :after pseudo-elements to render the track and thumb. It demonstrates effective state management via the :checked pseudo-selector and smooth transitions on all elements for a highly responsive and clean effect.

A snowflake generator in pure JS that creates unique SVG shapes on the fly. The geometry of each arm is determined by random parameters in a <path>, and symmetry is achieved through efficient cloning using the <use> tag.

An illustration of a cat created entirely in CSS, featuring interactive eyes that follow the cursor. JavaScript uses Math.atan2 to calculate the gaze angle, while all of the cat’s details - from the body to the whiskers - are implemented using pseudo-elements, box-shadow, and gradients.

A demonstration of pixel art creation using only CSS gradients and box-shadow animation, without a single image file or extra HTML elements.

Manage a dynamic queue of notifications with precise CSS transform: translateY stacking; dismissed items trigger a CSS flyOut animation before scheduled removal and the immediate recalculation of all remaining note positions via shiftNotes.

An animated loader button using jQuery and SCSS, where progress is implemented via an @for loop that generates 101 linear-gradient rules - the state is changed through a custom attribute updated by JS.

A skeuomorphic stopwatch built with modern CSS features - CSS Grid for the dial layout, linear-gradient and box-shadow for a realistic look, and animation control managed through CSS variables.

An impactful loading icon built on stroke-dashoffset animation for an SVG circle and swinging @keyframes for the icon. A minimalistic jQuery script with setTimeout is used to manage the loading cycle by adding state classes.

A simple button group where the indicator’s position is calculated in JS based on the button’s data-num attribute - the offset is set via style.marginLeft, while the active state is animated using CSS.

This interactive toggle switch demonstrates advanced animation work, where delayed class toggling in jQuery coordinates the knob movement and a stylish “color fill” text effect, created in CSS using overflow: hidden; and pseudo-elements.

Explore how a GSAP timeline is used to create a complex movement sequence using keyframes and onComplete callbacks to ensure smooth and realistic transitions between poses. All control is implemented via keyboard and touch event handlers.

An interactive timeline where JS synchronizes CSS transform: translateX for scrolling, background-position for parallax, and classes for sprite animation.

This Vue.js component showcases a clean implementation of the “Add to Cart” micro-interaction using reactive data and CSS animation. The main technical feature is the dynamic counter display via a CSS ::before pseudo-element and the count attribute, alongside the “Pop” effect upon update.

This custom radio button UI employs pure CSS @keyframes and transform properties to create a dynamic, liquid-like squash-and-stretch animation upon selection - the smooth UI transition is managed by complex jQuery state logic that precisely adds and removes animation classes.

This interactive pagination features a fluid numerical transition achieved solely through CSS clip-path animations, where JavaScript toggles the body class to trigger the complex morphing sequence on the SVG elements.

An elegant 3D scene where rotating text forms a spiral. The effect utilizes the perspective property for depth and HSL functions for procedurally generating the multi-layered color scheme.

A high-performance, CSS-driven countdown showcasing variable-based theming and complex keyframe animations, where a small JS utility only activates the final celebratory effect.

A technical showcase demonstrating how to control the neon glow intensity and color scheme using CSS variables and the hsl() function, while delivering a realistic neon tube effect on each digital segment via subtle text-shadow and box-shadow styling.

A realistic 3D toggle effect implemented entirely using pure CSS transforms (perspective, translate3d) and complex multi-step @keyframes animations to simulate press physics.

Here, stylish SVG graphics and ball animation thematically play on the 408 error, while a simple setTimeout activates a delayed text notification, enhancing the user experience.

A modern toggle switch animation utilizing pure CSS :checked selector states to drive complex plane take-off/landing @keyframes, augmented by vanilla JavaScript’s Web Animations API (WAAPI) for dynamic smoke particle generation and cleanup.

A technical approach to dynamic UI effects: the counter digits are animated via custom CSS transitions, while the high-contrast “shade” effect during the change is achieved using the contemporary mix-blend-mode: difference property.

A smooth, morphing circular button that expands on click to reveal three link items, utilizing complex CSS transitions, transition-delay, and a Pug template structure for dynamic content generation.

A visually engaging pixel heart animation created purely using an HTML ul/li structure and CSS @keyframes, where the “pop-in” effect is achieved through smooth transform: scale transitions.

This highly reusable CSS-only icon features complex bidirectional animation and a ripple effect, achieved by leveraging CSS Custom Properties for state and using a minimal JavaScript cloning trick to instantly restart the animation on click.

This striking burger menu animation is implemented purely with CSS keyframes and utilizes CSS custom properties for inverting the direction and precise positioning of each bar.

Pure CSS custom properties and SVG for a neat, interactive feedback rating; see how variable-driven styling creates smooth state transitions and subtle 3D transforms.

A clean implementation of the popular “confetti” effect for a button, using Vanilla JS to dynamically create/remove elements and set CSS variables, while the entire animation logic for movement and fading is handled by highly optimized CSS keyframes.

An intricate infinite 3D stacking animation achieved purely with CSS transform-style: preserve-3d and complex @keyframes, leveraging translateZ for depth and precise animation-timing-function steps to smoothly cycle three cards in a continuous loop.

Advanced CSS animation utilizing ten-point delays (nth-child) to create a ripple effect and showcasing CSS Houdini capabilities for animating length and angle values.

A demo of multi-step animations using keyframes within GSAP, plus subtle work with CSS filters (brightness) to simulate 3D object lighting.

The clean code illustrates how to use CSS variables for color control and a simple, yet effective mask animation to simulate a loading process.

See how spectacular, complex animations built with pure CSS and JavaScript create dynamic, memorable screen changes.

Witness the power of pure CSS with this mesmerizing 3D mechanical animation, built using advanced 3D transforms and intricately choreographed keyframes — no JavaScript required.

Here is an advanced example of an interactive UI element built entirely with CSS. The demo is technically notable for its approach to visualizing activity: it uses pseudo-elements and CSS variables to create glow effects, scanning lines, and a “data stream” that activates on input focus.

A dynamic SVG loader created with Sass. It shows how to build multi-layered animation using nested g elements within SVG and Sass maps for flexible control over colors and styles.

A 3D sphere where an SCSS @for loop calculates the transform for each ring, and the entire animation and structure, built on perspective and transform-style: preserve-3d, are fully configurable via variables.

Leverage the modern View Transitions API to seamlessly morph any element (e.g., button to dialog) using the view-transition-name property and custom CSS keyframes like flip-in.

This Cyberpunk-inspired card features a complex box-shadow offset and text-shadow for the core CRT aesthetic, paired with a dynamic :hover state that uses transform to instantly swap the terminal view for a social icon grid.

3D sphere from 21 concentric rings. Each ring — div with rotateX(90deg) and Z translation. Sizes and animation delays controlled via CSS variables. Rings pulse, changing color via hue-rotate. Rotation pauses on hover.