RSK World - CSS Animation Showcase | Keyframes, Transitions, Transforms | RSK World

Keyframes Transitions Transforms CSS3 Pure CSS

CSS Animation Showcase is a collection of pure CSS animations: keyframes (bounce, pulse, spin, shake, float, glow, rubberBand, jello, swing, heartBeat, wobble, rollIn, flipIn, zoomIn, slideIn, fadeIn), smooth transitions (scale, rotate, color, skew, lift, border), transforms (3D flip, tilt, zoom), visual effects (gradient shift, loading dots, progress bar, ripple, morph, text reveal), interactive demos (button bounce, toggle switch, flip card, accordion), advanced (glassmorphism, conic gradient border with @property, filter/blend, focus ring, shine, staggered entrance), unique (typing effect, skeleton loader, blob morph, gradient text, card stack, line-draw), loaders (wave, circle, dots, ring, progress circle, badge pulse, border glow). Accessibility: skip link, prefers-reduced-motion, focus-visible. No JavaScript. By rskworld.in.

If you find this CSS Animation Showcase useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download CSS Animation Showcase

Keyframe Animations

Bounce, pulse, spin, shake, float, glow plus extended keyframes: rubberBand, jello, swing, heartBeat, wobble, rollIn, flipInY/X, zoomIn, slideIn, fadeInUp. All pure CSS @keyframes.

Core: bounce, pulse, spin, shake, float, glow
Extended: rubberBand, jello, swing, heartBeat, wobble, rollIn
Entrance: flipInY/X, zoomIn, slideInLeft/Right, fadeInUp, slideUp
Use .stagger-children and .animations-respect-reduce for accessibility

Project Structure & Files

index.html (main showcase), advanced.html (extended demos). CSS: styles.css (base, layout, cards), animations.css (keyframes library), advanced.css (glassmorphism, @property), components.css (skeleton, typing, blob, gradient text, card stack, line-draw), effects.css (loaders, tooltip, progress circle).

index.html – keyframes, transitions, transforms, effects, interactive, advanced, unique, loaders
advanced.html – extended keyframes, staggered entrance, counter, floating label
No build step – open index.html or advanced.html in browser
Font Awesome 6 (CDN) for icons

Transitions & Transforms

Smooth hover transitions: scale, rotate, color, skew, lift, border. Transforms: 3D flip, tilt, zoom, rotate 3D. Visual effects: gradient shift, loading dots, progress bar, ripple, morph, text reveal.

Transitions – scale, rotate, color, skew, lift, border radius
Transforms – perspective, rotateY/X, scale(1.2)
Effects – gradient animation, dots, progress bar, ripple, clip-path reveal

Advanced & Unique

Glassmorphism (backdrop-filter), conic gradient border with @property, filter/blend animations, focus ring, shine sweep. Unique: CSS-only typing effect, skeleton loader, blob morph, animated gradient text, card stack, line-draw border, floating label.

Glassmorphism – blur, semi-transparent background
@property – animatable --angle, --num, --p for conic progress
Typing effect – steps() + border blink; skeleton – shimmer gradient
Blob – border-radius morph; line-draw – border reveal on hover

Loaders & Effects

Wave loader, circle spinner, dots spinner, ring loader, CSS tooltip, progress circle (@property), badge pulse, text shadow glow, border glow rotate. All CSS-only.

Wave – animated bars with delay; circle/dots/ring spinners
Progress circle – conic-gradient with @property --p
Badge pulse, text-shadow glow, gradient border animation

What You Get

Static HTML/CSS project: css-animation-showcase/ folder with index.html, advanced.html, styles.css, animations.css, advanced.css, components.css, effects.css. No JavaScript, no build step.

Complete source – css-animation-showcase/ with HTML and 5 CSS files
No build step – open index.html or advanced.html
README.md, LICENSE included
Technologies: HTML5, CSS3 only. © 2026 Molla Samser (RSK World).

Usage

Open index.html or advanced.html in a browser. Navigate sections: Keyframes, Transitions, Transforms, Visual Effects, Interactive, Advanced, Unique, Loaders. Link to advanced.html for extended keyframes and component demos.

index.html – full showcase with skip link and nav
advanced.html – rubberBand, jello, counter, floating label, keyframes reference
Accessibility: skip link, prefers-reduced-motion, focus-visible
Author: Molla Samser | rskworld.in

CSS Techniques

Uses @keyframes, transitions, transforms, @property for animatable custom properties, backdrop-filter, conic-gradient, mask, mix-blend-mode. Stagger via animation-delay on nth-child. Reduced motion respected.

animations.css – full keyframes library + stagger utilities
advanced.css – @property --angle, --num; glassmorphism; gradient border
effects.css – @property --p for progress circle
components.css – skeleton shimmer, typing steps(), blob border-radius animation

Project Features

Keyframes, transitions, transforms, visual effects, interactive (button, toggle, flip card, accordion), advanced (glass, gradient border, filter, blend, focus ring, shine, stagger), unique (typing, skeleton, blob, gradient text, card stack, line-draw), loaders and effects. Pure CSS.