139 CSS Animations
This collection showcases current and optimized CSS animations, emphasizing performance . You’ll find examples using transform (translate, scale, rotate) and opacity for smoothness and GPU-acceleration, alongside complex 3D effects with perspective. The key takeaway is the efficient use of @keyframes and various timing-function to create a realistic and vivid UX.
Last updated:
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.
CSS Grid Clock (Animated)
A highly detailed Dual Analog Clock component that compares abstract and real-time animation.
Folding/Collapsing Profile Card Starring Batwoman
An interactive profile card featuring a dynamic theme toggle triggered by clicks on the avatar or menu button.
GitHub Stargazers Counter (React)
A customizable React component that fetches live GitHub star counts via the API hook useEffect. It features a smooth loading transition: a spinning star icon expands into a count badge using CSS max-width and transform animations upon data retrieval, supported by SCSS-based light/dark theming.
Psyworm: CSS Motion-Path Animation Experiment
A mesmerizing, slightly eerie animation of a “living hole” with teeth, demonstrating the power of modern CSS for creating complex procedural graphics.
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.
Neu Times!
A neumorphic digital clock featuring a vertical sliding mechanism reminiscent of slot machines.
Simple HTML Charting with CSS Grid, Writing Mode, and Vue
A lightweight, colorful, and animated chart demonstrating data visualization capabilities using pure CSS and Vue without heavy dependencies.
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é.
3D Text Spiral Animation with CSS
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.
Pixel Heart Animation
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.
Scroll-Driven Gallery
A demonstration of the new CSS Scroll-Driven Animations (SDA) API, where the scroll position of the entire page directly drives a complex, scaling, and rotating grid of images, achieving a high-performance, engaging visual effect purely with CSS.
Pagination Liquid Blob Menu with CSS and Audio
The “liquid” pagination effect is fully implemented via pure CSS animation, using pseudo-elements and border-radius: 50% to create the dynamic “blob.” Vanilla JavaScript is responsible for precise active element positioning by calculating offsetLeft on click.
Heartless Confetti Button Effect
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.
Spectacular Pure CSS Screen Transition
See how spectacular, complex animations built with pure CSS and JavaScript create dynamic, memorable screen changes.
CSS-Only Dots World Map
A technical demo of geodata visualization using pure CSS/Sass to create a grid-based world map. The core feature is the animation control of numerous cells using @each and individual animation-delay: random(...), which makes the pulsing unique to each continent.
Cyberpunk Glitch Slideshow
A pure-CSS masterpiece that uses advanced perspective and @keyframes to create a striking 3D-like parallax and an automatic slideshow. The demo highlights the power of modern CSS to achieve sophisticated interactive and animated interfaces without a single line of JS.
Image Orbit Animation with CSS
This carousel effect demonstrates a modern approach to CSS animations, using the offset-path property for circular motion. The complex scaling and highlighting effects on hover are achieved purely with CSS transitions and the :has() selector, eliminating the need for JavaScript.
Pure CSS Linear Circular Motion
Witness the power of pure CSS with this mesmerizing 3D mechanical animation, built using advanced 3D transforms and intricately choreographed keyframes — no JavaScript required.
Earth with Pure CSS
A showcase of advanced CSS capabilities for creating stunning 2D animations. It uses CSS @property for smooth property transitions, allowing you to animate box-shadow and other elements without compromising performance.
Gradient Pulse Animation with CSS
This mini-project leverages CSS custom properties (@property) to create an animated gradient and interactive effects, while using requestAnimationFrame for optimized animation performance.
Hot Ones Neon Sign Animation
A neon sign effect built with SVG and CSS filters. The addition of a flickering animation using @keyframes and a jQuery class toggle makes the component both realistic and interactive.
The Simplest Dots (CSS)
A pure CSS demo that generates a complex 3D animation with perspective and transform-style: preserve-3d. It leverages CSS variables (--i, --d) to parameterize and control animation timing and positioning, making it flexible and scalable.
Animated Text Ribbon with SVG and CSS
Explore an SVG-powered animated text ribbon, showcasing complex path animations and efficient CSS for a visually striking, scalable effect.
Simple CSS Text Loading Animation
See how subtle animation-delay and pseudo-selectors like nth-child can animate individual letters, creating an engaging and scalable text loader powered entirely by CSS.
3D Glowing Bottle
This demo showcases advanced CSS techniques like synchronized transform: rotate() animations and the filter: drop-shadow() property to achieve a visually striking glowing liquid effect within a transparent container.
CSS 3D Sphere Animation
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.