145 CSS @keyframes Examples
Explore the creation of CSS animations with the @keyframes rule. This collection details both the basic keyframe syntax and the subtleties of control via the animation shorthand, including duration, delays, and easing functions (cubic-bezier). Special attention is paid to performance: examples focus on animating GPU-accelerated properties (transform, opacity) and using will-change for optimization.
Last updated:
List Styles 2
An interactive grid of task cards where clicking a counter button triggers a card-swap animation, revealing a hidden sub-list from behind the main item using z-index manipulation and CSS transforms.
Bouncy CSS Text Animation with Splitting.js
A playful typographic vignette where Splitting.js enables granular CSS control, while complex @keyframes orchestrate a physics-based liquid dot that physically interacts with specific letters via data-char attributes.
Animated Countdown
An energetic countdown animation orchestrated by JavaScript animationend events. CSS keyframes drive complex rotation and translation transforms with an elastic feel, creating a seamless chain reaction where numbers swing in and out before revealing the final “GO!” message.
Incrementing Counter
A dynamic and engaging statistics block that creates a sense of activity and popularity through running numbers and background animation.
Kinetic CSS Loader
A smooth, rhythmic, and mesmerizing loader that looks complex but is implemented simply and efficiently.
Skull Toggle (CSS)
A playful skeleton toggle switch animated purely with CSS. The skull handle slides via @keyframes triggered by the :checked state, while a complex hand assembly - constructed from gradients and box-shadows - slides in to “push” the toggle, creating a whimsical, interactive narrative without JavaScript.
Toast Notification
A fully functional, visually pleasing notification system ready for integration into web apps to provide user feedback.
Transaction List with View Transitions
A seamless master-detail interface leveraging the native View Transitions API to animate structural DOM changes without external libraries.
Futuristic Card Effect
A high-tech, cinematic profile card that responds to interaction with complex text animation, immersing the user in a sci-fi atmosphere.
Jiggly Radio Buttons
A playful radio button component featuring a “jelly” physics simulation.
Organic Button
A mesmerizing, organic UI element that feels alive and constantly shifting, engaging the user in a visual experiment.
CSS Hamburger Icons
A collection of 10 distinct hamburger menu animations, ranging from simple rotations to complex, multi-stage morphs.
Magic Todo List
A gamified task categorization UI built with React and TypeScript, featuring a continuously sliding conveyor belt of tasks.
Rating Stars
A sophisticated star rating component featuring fractional fills implemented via CSS clip-path. The JavaScript class generates SVG stars and orchestrates a staggered entrance animation, while SCSS keyframes drive complex scale, rotate, and shockwave effects for a tactile, gamified feel.
Stroke Logo Animation
An elegant, fluid, and hypnotic logo reveal animation that looks professional and draws attention to the branding.
Tab Bar Interaction with Dark Mode
A lively, responsive interface that turns boring navigation into a playful experience, where every user action is rewarded with delightful visual feedback.
Creative Section Design
A visually rich, animated section with cards that respond to hover (a colored border appears), creating a sense of interactivity and depth.
Interactive Card with Floating Lightbox Images
A lively, immersive page where the central element grabs attention with a flip effect, while the background creates a weightless atmosphere with clickable details to explore.
RGB Dot Preloader
A hypnotic, kaleidoscopic loader where white dots decompose into their RGB constituents during motion, generating a sensation of energy and complexity.
CSS Rage Button
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.
Playful Toss Toggle Switch
A playful, tactile toggle switch where the container seemingly ‘spits out’ or lobs the indicator ball to the opposing side.
Pure CSS Moiré Wave Dots
A dynamic field of black dots moving synchronously yet phase-shifted in time, forming complex geometric patterns reminiscent of moiré.
Volumetric 3D CSS Toggle Switch
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.
Interactive Grid with Gooey Blob Effect
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.
Pure CSS Liquid Wave Illusion
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.
Text Reveal with Splitting.js
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.
CATS Pets Store Hero Section
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.
Sign Up and Sign In Toggle Form
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.