A cats pets store hero section built with modern frontend techniques for responsive and reusable UI.
@keyframes
173 snippetsBrowse @keyframes examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-keyframes
Snippets(173)
- CATS Pets Store Hero Section
- SVG Upload Animation
A svg upload animation built with modern frontend techniques for responsive and reusable UI.
- Playful Toss Toggle Switch
A playful toss toggle switch built with modern frontend techniques for responsive and reusable UI.
- Skeuomorphic Stopwatch
A skeuomorphic stopwatch built with modern frontend techniques for responsive and reusable UI.
- Random SVG Snowflake Generator
A random svg snowflake generator built with modern frontend techniques for responsive and reusable UI.
- Dynamic Notification Queue
A dynamic notification queue built with modern frontend techniques for responsive and reusable UI.
- Pagination with Morphing Numbers
A pagination with morphing numbers built with modern frontend techniques for responsive and reusable UI.
- Interactive Skateboard Loading Animation
A interactive skateboard loading animation built with modern frontend techniques for responsive and reusable UI.
- Interactive Grid with Gooey Blob Effect
A interactive grid with gooey blob effect built with modern frontend techniques for responsive and reusable UI.
- GSAP 3 Animation Deck with 3D Transforms
A gsap 3 animation deck with 3d transforms built with modern frontend techniques for responsive and reusable UI.
- Animated UI Radio Button with CSS Keyframes
A animated ui radio button with css keyframes built with modern frontend techniques for responsive and reusable UI.
- Gender Toggle Button with Bounce Effect
A gender toggle button with bounce effect built with modern frontend techniques for responsive and reusable UI.
- Vue Add to Cart Animation
A vue add to cart animation built with modern frontend techniques for responsive and reusable UI.
- Progress Button Microinteractions
A progress button microinteractions built with modern frontend techniques for responsive and reusable UI.
- Text Reveal with Splitting.js
A text reveal with splitting.js built with modern frontend techniques for responsive and reusable UI.
- Bouncy Counter
A bouncy counter built with modern frontend techniques for responsive and reusable UI.
- Animated Countdown
A animated countdown built with modern frontend techniques for responsive and reusable UI.
- Incrementing Counter
A incrementing counter built with modern frontend techniques for responsive and reusable UI.
- Interactive Card with Floating Lightbox Images
A interactive card with floating lightbox images built with modern frontend techniques for responsive and reusable UI.
- List Styles 2
A list styles 2 built with modern frontend techniques for responsive and reusable UI.
- Magic Todo List
A magic todo list built with modern frontend techniques for responsive and reusable UI.
- Rating Stars
A rating stars built with modern frontend techniques for responsive and reusable UI.
- React SVG Fireworks Celebration
A react svg fireworks celebration built with modern frontend techniques for responsive and reusable UI.
Technologies
TypeScript, HTML, CSSDifficulty
IntermediateBrowser support
Chrome 100+, Edge 100+, Safari 14+, Firefox 90+Features
Procedural Paths, Zero-JS Animation, SVG Vector Graphics, Synchronized Loops - SVG Perimeter Progress Upload Button
A svg perimeter progress upload button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Perimeter Progress, State Animations, Dark Mode - Stroke Logo Animation
A stroke logo animation built with modern frontend techniques for responsive and reusable UI.
- Toast Notification
A toast notification built with modern frontend techniques for responsive and reusable UI.
- Cascading Image Slider
A cascading image slider built with modern frontend techniques for responsive and reusable UI.
- Bounce Menu Animation (Pure CSS)
A bounce menu animation (pure css) built with modern frontend techniques for responsive and reusable UI.
- CSS Hamburger Icons
A css hamburger icons built with modern frontend techniques for responsive and reusable UI.
- Weather Widget
A weather widget built with modern frontend techniques for responsive and reusable UI.
- Periodic Table of Type CSS Grid
A periodic table of type css grid built with modern frontend techniques for responsive and reusable UI.
- Card Skeleton Loader
A card skeleton loader built with modern frontend techniques for responsive and reusable UI.
- CSS Cat Illustration with Tracking Eyes
A css cat illustration with tracking eyes built with modern frontend techniques for responsive and reusable UI.
- Single Div CSS Computer
A single div css computer built with modern frontend techniques for responsive and reusable UI.
- Animated SVG Weather Icons
A animated svg weather icons built with modern frontend techniques for responsive and reusable UI.
- Animated Weather Icons
A animated weather icons built with modern frontend techniques for responsive and reusable UI.
- CSS Weather Icon
A css weather icon built with modern frontend techniques for responsive and reusable UI.
- Pure CSS Game: Stacker
A pure css game: stacker built with modern frontend techniques for responsive and reusable UI.
- CSS-Only Countdown Clock
A css-only countdown clock built with modern frontend techniques for responsive and reusable UI.
- Countdown
A countdown built with modern frontend techniques for responsive and reusable UI.
- High-Performance CSS Countdown
A high-performance css countdown built with modern frontend techniques for responsive and reusable UI.
- Pure CSS Carnival Game
A pure css carnival game built with modern frontend techniques for responsive and reusable UI.
- Hitman Absolution Loading Screen Big Barcode
A hitman absolution loading screen big barcode built with modern frontend techniques for responsive and reusable UI.
- Banner Google Engage CSS
A banner google engage css built with modern frontend techniques for responsive and reusable UI.
- Floating Personas
A floating personas built with modern frontend techniques for responsive and reusable UI.
- 3D Flip Clock Counter in Pure CSS
A 3d flip clock counter in pure css built with modern frontend techniques for responsive and reusable UI.
- Animated Counter Element
A animated counter element built with modern frontend techniques for responsive and reusable UI.
- Pure CSS Counter
A pure css counter built with modern frontend techniques for responsive and reusable UI.
- Minimalist CSS Toggle Switch
A minimalist css toggle switch built with modern frontend techniques for responsive and reusable UI.
- Slingshot Elastic Stretch Toggle
A slingshot elastic stretch toggle built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 15.4+Features
Elastic Motion, Viewport Stretching, State Detection - Jiggly Radio Buttons
A jiggly radio buttons built with modern frontend techniques for responsive and reusable UI.
- Pop-Up Overlay
A pop-up overlay built with modern frontend techniques for responsive and reusable UI.
- Contact Form with SVG Animation
A contact form with svg animation built with modern frontend techniques for responsive and reusable UI.
- Sign Up and Sign In Toggle Form
A sign up and sign in toggle form built with modern frontend techniques for responsive and reusable UI.
- Simple Subscribe Form
A simple subscribe form built with modern frontend techniques for responsive and reusable UI.
- Skull Toggle (CSS)
A skull toggle (css) built with modern frontend techniques for responsive and reusable UI.
- Color Wheel Loader using Animated Custom Properties
A color wheel loader using animated custom properties built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, CSS Custom PropertiesDifficulty
intermediateFeatures
Smooth color transitions, Staggered animation delaysResponsive
Yes - Infinite Loader on Top
A infinite loader on top built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGFeatures
Pure CSS, No JavaScript, SVG AnimationResponsive
Yes - Snake Game Preloader
A snake game preloader built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGFeatures
No-JS, Infinite Loop, Pixel ArtResponsive
Yes - Comic Director Splash Animation
A comic director splash animation built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Hardware accelerated, Sequential reveal, Custom easingResponsive
Yes - CSS Bookmark
A css bookmark built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Houdini, SVG MaskDifficulty
advancedFeatures
Checkbox Hack, Gradient Animation - Only CSS Loading Animation
A only css loading animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SCSSDifficulty
intermediateFeatures
Pure CSS, Percentage Counter, Loop-generated framesResponsive
Yes - CSS Circle Notifications
A css circle notifications built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
easyFeatures
Pure CSS, Hover Effects, Keyframe AnimationsResponsive
Yes - Animated CPU Circuit Loader
A animated cpu circuit loader built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
SVG Paths, Stroke Animation, Gradients, Circuit DesignResponsive
Yes - LEGO Stacking Preloader
A lego stacking preloader built with modern frontend techniques for responsive and reusable UI.
Technologies
SVG, CSSDifficulty
IntermediateFeatures
Animated, Scalable - Loading Animation with CSS Custom Properties
A loading animation with css custom properties built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Custom Properties, CSS AnimationsDifficulty
beginnerFeatures
Themable colors, Looping animationResponsive
Yes - Rainbowy Dashed Divider
A rainbowy dashed divider built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
CSS Animation, Linear Gradient, Pseudo-elementsResponsive
Yes - Material Design Card Effect
A material design card effect built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, CSS3Difficulty
IntermediateFeatures
Multi-layered shadows, Material Design elevation - Material Design: Profile Card
A material design: profile card built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
AdvancedFeatures
Sequential Reveal, Shape Morphing, Material DesignResponsive
Yes - Color Palette
A color palette built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
BeginnerFeatures
Hover Animations, Responsive Grid, Color Palette DisplayResponsive
Yes - CSS3 Business Card
A css3 business card built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, CSS3Difficulty
IntermediateFeatures
3D Flip, Long Shadows, Keyframe AnimationsResponsive
Yes - Expandable Wallet Payment Card
A expandable wallet payment card built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
Expandable UI, Pure CSS State, Smooth Animation, :has() SelectorResponsive
Yes - Futuristic Card Effect
A futuristic card effect built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Glassmorphism, Text Animation, Futuristic UIResponsive
Yes - Organic Button
A organic button built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Multi-step animation, Loading state, Pulsating effectsResponsive
Yes - Send Button
A send button built with modern frontend techniques for responsive and reusable UI.
Technologies
html, css, javascriptDifficulty
beginnerFeatures
sequential animation, icon translation, fade-in effectResponsive
Yes - Scroll Down Icon Animation
A scroll down icon animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerFeatures
CSS Animation, Looping EffectResponsive
Yes - Attractive Play Button
A attractive play button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVG, HTMLDifficulty
BeginnerFeatures
SVG Animation, Hover EffectResponsive
Yes - Bouncing Play Button
A bouncing play button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScript, SVGDifficulty
intermediateFeatures
3D Transform, Bouncing Animation, Interactive ToggleResponsive
Yes - Animated SVG Alignment Toolbar
A animated svg alignment toolbar built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Micro-interactions, SVG Animation, Dark ModeResponsive
Yes - Hover Over Me Button
A hover over me button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
BeginnerFeatures
Keyframe Animations, Pseudo Elements, Hover EffectsResponsive
Yes - Material Floating Button CSS
A material floating button css built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
pure-css, keyframes-animation, material-designResponsive
Yes - Download Buttons
A download buttons built with modern frontend techniques for responsive and reusable UI.
Difficulty
BeginnerFeatures
Hover animations, SVG icons, CSS transformsResponsive
Yes - CSS Rage Button
A css rage button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
IntermediateFeatures
Animation, Interactive, Visual FeedbackResponsive
Yes - Skeuomorphic Retro Power Buttons
A skeuomorphic retro power buttons built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
SVG Path Animation, Skeuomorphic Design, Event-driven Micro-interactions, Responsive ScalingResponsive
Yes - Arrow Keyframes Animation
A arrow keyframes animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerFeatures
Keyframe animations, Sequential delays, Color transitionsResponsive
Yes - Retro CSS Slideshow
A retro css slideshow built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
BeginnerFeatures
Infinite loop, No-JS implementationResponsive
Yes - CSS Particle Style Animation
A css particle style animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Depth of Field, Pure CSS Animation, Blur EffectsResponsive
Yes - CSS Light Sphere Animation #21
A css light sphere animation #21 built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
IntermediateFeatures
3D Transforms, Hue Rotation, CSS Variables, Interactive HoverResponsive
Yes - Skeuomorphic Egg Toggle Switch
A skeuomorphic egg toggle switch built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+Features
3D Rotation, Skeuomorphic Design, CSS Keyframes, Multi-layered ShadowsResponsive
Yes - Skeuomorphic Reversi Radio Buttons
A skeuomorphic reversi radio buttons built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 43+, Edge 12+, Firefox 16+, Safari 9+Features
Skeuomorphic Design, 3D Flip Animation, Gradient ShadingResponsive
Yes - Pure CSS Liquid Wave Illusion
A pure css liquid wave illusion built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Animation, Pseudo-elements, Fluid MotionResponsive
Yes - CSS Text Filling with Water
A css text filling with water built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
Animated Background, Text MaskingResponsive
Yes - Drip Drop Animation
A drip drop animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
intermediateFeatures
CSS Animations, No JavaScriptResponsive
Yes - Waves
A waves built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, SVGDifficulty
BeginnerFeatures
Pure CSS animations, Scalable vector graphicsResponsive
Yes - 3D Tilt Toggle Switch
A 3d tilt toggle switch built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
IntermediateFeatures
3D transforms, Keyframe animations, Tactile UIResponsive
Yes - Auto Type CSS
A auto type css built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
beginnerFeatures
Blinking cursor, Character-by-character reveal, Zero-JSResponsive
Yes - CSS Typing Animation
A css typing animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
beginnerFeatures
Typewriter effect, Blinking cursor, Zero JavaScriptResponsive
Yes - Typing Text Animation
A typing text animation built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
BeginnerFeatures
Typewriter effect, Blinking cursor, CSS AnimationsResponsive
Yes - Blazing Fire
A blazing fire built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
intermediateFeatures
Text Animation, Flicker Effect, Text GlowResponsive
Yes - Eye-Catching Bootstrap 5 Button
A eye-catching bootstrap 5 button built with modern frontend techniques for responsive and reusable UI.
Technologies
Bootstrap 5, CSS3Difficulty
IntermediateFeatures
Neon Gradient, Shine Animation, Hover ScalingResponsive
Yes









































































