@keyframes

173 snippets

Browse @keyframes examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-keyframes

Snippets(173)

CATS Pets Store Hero Section
A cats pets store hero section built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
SVG Upload Animation
A svg upload animation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Playful Toss Toggle Switch
A playful toss toggle switch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Skeuomorphic Stopwatch
A skeuomorphic stopwatch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Random SVG Snowflake Generator
A random svg snowflake generator built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Dynamic Notification Queue
A dynamic notification queue built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pagination with Morphing Numbers
A pagination with morphing numbers built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Interactive Skateboard Loading Animation
A interactive skateboard loading animation built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Frontend Ui Modern Design+1 more
Demo Code
Interactive Grid with Gooey Blob Effect
A interactive grid with gooey blob effect built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
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.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
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.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Gender Toggle Button with Bounce Effect
A gender toggle button with bounce effect built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Vue Add to Cart Animation
A vue add to cart animation built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Progress Button Microinteractions
A progress button microinteractions built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Text Reveal with Splitting.js
A text reveal with splitting.js built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Bouncy Counter
A bouncy counter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Countdown
A animated countdown built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Incrementing Counter
A incrementing counter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Interactive Card with Floating Lightbox Images
A interactive card with floating lightbox images built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
List Styles 2
A list styles 2 built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Magic Todo List
A magic todo list built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Rating Stars
A rating stars built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
React SVG Fireworks Celebration
A react svg fireworks celebration built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
TypeScript, HTML, CSS
Difficulty
Intermediate
Browser 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.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser 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.
Frontend Ui Modern Design Web Components
Demo Code
Toast Notification
A toast notification built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Cascading Image Slider
A cascading image slider built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Bounce Menu Animation (Pure CSS)
A bounce menu animation (pure css) built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
CSS Hamburger Icons
A css hamburger icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Weather Widget
A weather widget built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Periodic Table of Type CSS Grid
A periodic table of type css grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Card Skeleton Loader
A card skeleton loader built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
CSS Cat Illustration with Tracking Eyes
A css cat illustration with tracking eyes built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Single Div CSS Computer
A single div css computer built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated SVG Weather Icons
A animated svg weather icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Animated Weather Icons
A animated weather icons built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Weather Icon
A css weather icon built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Game: Stacker
A pure css game: stacker built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS-Only Countdown Clock
A css-only countdown clock built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Countdown
A countdown built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
High-Performance CSS Countdown
A high-performance css countdown built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Pure CSS Carnival Game
A pure css carnival game built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Hitman Absolution Loading Screen Big Barcode
A hitman absolution loading screen big barcode built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Frontend Ui Modern Design+1 more
Demo Code
Banner Google Engage CSS
A banner google engage css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Floating Personas
A floating personas built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
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.
Frontend Ui Modern Design Web Components
Demo Code
Animated Counter Element
A animated counter element built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Pure CSS Counter
A pure css counter built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Minimalist CSS Toggle Switch
A minimalist css toggle switch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Slingshot Elastic Stretch Toggle
A slingshot elastic stretch toggle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser 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.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Pop-Up Overlay
A pop-up overlay built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Contact Form with SVG Animation
A contact form with svg animation built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
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.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Simple Subscribe Form
A simple subscribe form built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Skull Toggle (CSS)
A skull toggle (css) built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
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.
Loading Animation Css Loader Html Frontend Ui+2 more
Demo Code
Technologies
CSS Houdini, CSS Custom Properties
Difficulty
intermediate
Features
Smooth color transitions, Staggered animation delays
Responsive
Yes
Infinite Loader on Top
A infinite loader on top built with modern frontend techniques for responsive and reusable UI.
Loading Animation Semantic Html Css Loader Html+3 more
Demo Code
Technologies
CSS, SVG
Features
Pure CSS, No JavaScript, SVG Animation
Responsive
Yes
Snake Game Preloader
A snake game preloader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Semantic Html Css Loader Html+3 more
Demo Code
Technologies
CSS, SVG
Features
No-JS, Infinite Loop, Pixel Art
Responsive
Yes
Comic Director Splash Animation
A comic director splash animation built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Intermediate
Features
Hardware accelerated, Sequential reveal, Custom easing
Responsive
Yes
CSS Bookmark
A css bookmark built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS Houdini, SVG Mask
Difficulty
advanced
Features
Checkbox Hack, Gradient Animation
Only CSS Loading Animation
A only css loading animation built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Html Frontend Ui+3 more
Demo Code
Technologies
CSS, SCSS
Difficulty
intermediate
Features
Pure CSS, Percentage Counter, Loop-generated frames
Responsive
Yes
CSS Circle Notifications
A css circle notifications built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
easy
Features
Pure CSS, Hover Effects, Keyframe Animations
Responsive
Yes
Animated CPU Circuit Loader
A animated cpu circuit loader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Html Frontend Ui+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+
Features
SVG Paths, Stroke Animation, Gradients, Circuit Design
Responsive
Yes
LEGO Stacking Preloader
A lego stacking preloader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Css Loader Html Frontend Ui+2 more
Demo Code
Technologies
SVG, CSS
Difficulty
Intermediate
Features
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.
Loading Animation Css Loader Html Frontend Ui+3 more
Demo Code
Technologies
CSS Custom Properties, CSS Animations
Difficulty
beginner
Features
Themable colors, Looping animation
Responsive
Yes
Rainbowy Dashed Divider
A rainbowy dashed divider built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
CSS Animation, Linear Gradient, Pseudo-elements
Responsive
Yes
Material Design Card Effect
A material design card effect built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+3 more
Demo Code
Technologies
SCSS, CSS3
Difficulty
Intermediate
Features
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.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Advanced
Features
Sequential Reveal, Shape Morphing, Material Design
Responsive
Yes
Color Palette
A color palette built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Hover Animations, Responsive Grid, Color Palette Display
Responsive
Yes
CSS3 Business Card
A css3 business card built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+3 more
Demo Code
Technologies
SCSS, CSS3
Difficulty
Intermediate
Features
3D Flip, Long Shadows, Keyframe Animations
Responsive
Yes
Expandable Wallet Payment Card
A expandable wallet payment card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Expandable UI, Pure CSS State, Smooth Animation, :has() Selector
Responsive
Yes
Futuristic Card Effect
A futuristic card effect built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Intermediate
Features
Glassmorphism, Text Animation, Futuristic UI
Responsive
Yes
Organic Button
A organic button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Intermediate
Features
Multi-step animation, Loading state, Pulsating effects
Responsive
Yes
Send Button
A send button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
html, css, javascript
Difficulty
beginner
Features
sequential animation, icon translation, fade-in effect
Responsive
Yes
Scroll Down Icon Animation
A scroll down icon animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Features
CSS Animation, Looping Effect
Responsive
Yes
Attractive Play Button
A attractive play button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, SVG, HTML
Difficulty
Beginner
Features
SVG Animation, Hover Effect
Responsive
Yes
Bouncing Play Button
A bouncing play button built with modern frontend techniques for responsive and reusable UI.
Call To Action Semantic Html Html Frontend Ui+4 more
Demo Code
Technologies
HTML, CSS, JavaScript, SVG
Difficulty
intermediate
Features
3D Transform, Bouncing Animation, Interactive Toggle
Responsive
Yes
Animated SVG Alignment Toolbar
A animated svg alignment toolbar built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Micro-interactions, SVG Animation, Dark Mode
Responsive
Yes
Hover Over Me Button
A hover over me button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Keyframe Animations, Pseudo Elements, Hover Effects
Responsive
Yes
Material Floating Button CSS
A material floating button css built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Intermediate
Features
pure-css, keyframes-animation, material-design
Responsive
Yes
Download Buttons
A download buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
Beginner
Features
Hover animations, SVG icons, CSS transforms
Responsive
Yes
CSS Rage Button
A css rage button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Intermediate
Features
Animation, Interactive, Visual Feedback
Responsive
Yes
Skeuomorphic Retro Power Buttons
A skeuomorphic retro power buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
SVG Path Animation, Skeuomorphic Design, Event-driven Micro-interactions, Responsive Scaling
Responsive
Yes
Arrow Keyframes Animation
A arrow keyframes animation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS, HTML
Difficulty
beginner
Features
Keyframe animations, Sequential delays, Color transitions
Responsive
Yes
Retro CSS Slideshow
A retro css slideshow built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Beginner
Features
Infinite loop, No-JS implementation
Responsive
Yes
CSS Particle Style Animation
A css particle style animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Depth of Field, Pure CSS Animation, Blur Effects
Responsive
Yes
CSS Light Sphere Animation #21
A css light sphere animation #21 built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Intermediate
Features
3D Transforms, Hue Rotation, CSS Variables, Interactive Hover
Responsive
Yes
Skeuomorphic Egg Toggle Switch
A skeuomorphic egg toggle switch built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
3D Rotation, Skeuomorphic Design, CSS Keyframes, Multi-layered Shadows
Responsive
Yes
Skeuomorphic Reversi Radio Buttons
A skeuomorphic reversi radio buttons built with modern frontend techniques for responsive and reusable UI.
Call To Action Semantic Html Html Frontend Ui+5 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 43+, Edge 12+, Firefox 16+, Safari 9+
Features
Skeuomorphic Design, 3D Flip Animation, Gradient Shading
Responsive
Yes
Pure CSS Liquid Wave Illusion
A pure css liquid wave illusion built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Animation, Pseudo-elements, Fluid Motion
Responsive
Yes
CSS Text Filling with Water
A css text filling with water built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Animated Background, Text Masking
Responsive
Yes
Drip Drop Animation
A drip drop animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
intermediate
Features
CSS Animations, No JavaScript
Responsive
Yes
Waves
A waves built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
CSS, SVG
Difficulty
Beginner
Features
Pure CSS animations, Scalable vector graphics
Responsive
Yes
3D Tilt Toggle Switch
A 3d tilt toggle switch built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
3D transforms, Keyframe animations, Tactile UI
Responsive
Yes
Auto Type CSS
A auto type css built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
beginner
Features
Blinking cursor, Character-by-character reveal, Zero-JS
Responsive
Yes
CSS Typing Animation
A css typing animation built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
beginner
Features
Typewriter effect, Blinking cursor, Zero JavaScript
Responsive
Yes
Typing Text Animation
A typing text animation built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Typewriter effect, Blinking cursor, CSS Animations
Responsive
Yes
Blazing Fire
A blazing fire built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
intermediate
Features
Text Animation, Flicker Effect, Text Glow
Responsive
Yes
Eye-Catching Bootstrap 5 Button
A eye-catching bootstrap 5 button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
Bootstrap 5, CSS3
Difficulty
Intermediate
Features
Neon Gradient, Shine Animation, Hover Scaling
Responsive
Yes

Page 1 of 2

related hubs