A animated vertical timeline with react hooks built with modern frontend techniques for responsive and reusable UI.
Transition
145 snippetsBrowse transition examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-transition
Snippets(145)
- Animated Vertical Timeline with React Hooks
- React Modal Button Animation with Pure CSS Transitions
A react modal button animation with pure css transitions built with modern frontend techniques for responsive and reusable UI.
- Background Shape Change (Simple Transition)
A background shape change (simple transition) built with modern frontend techniques for responsive and reusable UI.
- Play with Header on Page Transitions
A play with header on page transitions built with modern frontend techniques for responsive and reusable UI.
- SVG Upload Animation
A svg upload animation built with modern frontend techniques for responsive and reusable UI.
- Stripe-Style Animated Vertical Tabs
A stripe-style animated vertical tabs built with modern frontend techniques for responsive and reusable UI.
- Smooth Fullscreen Slideshow Animation
A smooth fullscreen slideshow animation built with modern frontend techniques for responsive and reusable UI.
- CSS Slider Transitions
A css slider transitions built with modern frontend techniques for responsive and reusable UI.
- Card Slider
A card slider built with modern frontend techniques for responsive and reusable UI.
- Minimal Carousel (No Dependencies)
A minimal carousel (no dependencies) built with modern frontend techniques for responsive and reusable UI.
- Range Slider with Sliding Value
A range slider with sliding value built with modern frontend techniques for responsive and reusable UI.
- Push-Right Menu Page with GSAP Animations
A push-right menu page with gsap animations built with modern frontend techniques for responsive and reusable UI.
- Squircle Slider
A squircle slider built with modern frontend techniques for responsive and reusable UI.
- Wriggly Squiggly Navigation
A wriggly squiggly navigation built with modern frontend techniques for responsive and reusable UI.
- Melty Line Goodness
A melty line goodness built with modern frontend techniques for responsive and reusable UI.
- Accordion Slider with Vanilla JS
A accordion slider with vanilla js built with modern frontend techniques for responsive and reusable UI.
- Nested Accordion FAQs
A nested accordion faqs built with modern frontend techniques for responsive and reusable UI.
- Animated Bottom Tab Bar with CSS Transitions
A animated bottom tab bar with css transitions built with modern frontend techniques for responsive and reusable UI.
- Animated Multi-Player Selection Card
A animated multi-player selection card built with modern frontend techniques for responsive and reusable UI.
Technologies
JavaScript, SCSS, HTMLDifficulty
IntermediateBrowser support
Chrome 49+, Edge 15+, Firefox 31+, Safari 9.1+Features
Dynamic Resizing, SVG Theming, State Management - Background Slider
A background slider built with modern frontend techniques for responsive and reusable UI.
- Expandable News Card Widget
A expandable news card widget built with modern frontend techniques for responsive and reusable UI.
Technologies
Babel, CSS, HTMLDifficulty
BeginnerBrowser support
Chrome 100+, Edge 100+, Safari 14+, Firefox 90+Features
State-Driven Expansion, CSS Transitions, Gradient UI, Class Component - Ghost Ships Sticky Header
A ghost ships sticky header built with modern frontend techniques for responsive and reusable UI.
- Log In and Sign Up Forms with Fingerprint
A log in and sign up forms with fingerprint built with modern frontend techniques for responsive and reusable UI.
- Magnetic Video Play Button Concept
A magnetic video play button concept built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+Features
Mouse Tracking, Smooth Transition, Play/Pause Toggle, Video Loading - Photo Animation on Text Hover
A photo animation on text hover built with modern frontend techniques for responsive and reusable UI.
- Physics Milestones Timeline
A physics milestones timeline built with modern frontend techniques for responsive and reusable UI.
- Radial Navigation Menu
A radial navigation menu built with modern frontend techniques for responsive and reusable UI.
- React Animated Custom Cursor
A react animated custom cursor built with modern frontend techniques for responsive and reusable UI.
- Responsive Watch Using vmin
A responsive watch using vmin built with modern frontend techniques for responsive and reusable UI.
- Stacked Card Pull-Down Navigation
A stacked card pull-down navigation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 14+Features
Card Deck UI, Staggered Animation, Dark Mode - Animated Share Interaction
A animated share interaction built with modern frontend techniques for responsive and reusable UI.
- Checkbox Animations with Indeterminate State
A checkbox animations with indeterminate state built with modern frontend techniques for responsive and reusable UI.
- Simple SVG Circle Graph with Animation
A simple svg circle graph with animation 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.
- Progress Bar with Dynamic CSS Gradient
A progress bar with dynamic css gradient 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.
- Kinetic 144-Clock Digital Display
A kinetic 144-clock digital display built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
AdvancedBrowser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 12+Features
Kinetic Typography, CSS Variables, Angle Normalization, React State Management - Vue FLIP Image Gallery
A vue flip image gallery built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, TypeScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Safari 14+, Firefox 90+Features
FLIP Animation, Grid Layout, Interactive Selection, Hardware Acceleration - Product Slider: Marvel Characters
A product slider: marvel characters built with modern frontend techniques for responsive and reusable UI.
- Responsive Flexbox Slider
A responsive flexbox slider built with modern frontend techniques for responsive and reusable UI.
- Odometer Number Counter
A odometer number counter built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 90+, Edge 90+, Firefox 88+, Safari 15+Features
Odometer Effect, CSS Custom Easing, 3D Explode View, dat.gui Integration - Extreme Hover with HTML and CSS
A extreme hover with html and css built with modern frontend techniques for responsive and reusable UI.
- Real-time Clock
A real-time clock built with modern frontend techniques for responsive and reusable UI.
- Simple and Responsive Image Slider
A simple and responsive image slider built with modern frontend techniques for responsive and reusable UI.
- FAQ Accordion with Font Awesome Icons
A faq accordion with font awesome icons built with modern frontend techniques for responsive and reusable UI.
- Soft UI Counter Component
A soft ui counter component built with modern frontend techniques for responsive and reusable UI.
- Day and Night Toggle with SVG Animation
A day and night toggle with svg animation built with modern frontend techniques for responsive and reusable UI.
- Simple Full-Screen Slideshow With Vanilla JavaScript
A simple full-screen slideshow with vanilla javascript 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.
- Emerging Dropdown Menu
A emerging dropdown menu built with modern frontend techniques for responsive and reusable UI.
- Side Navigation with Icons
A side navigation with icons built with modern frontend techniques for responsive and reusable UI.
- Space Nav: A Full-Screen Menu
A space nav: a full-screen menu built with modern frontend techniques for responsive and reusable UI.
- Animated Menu Bar with Hamburger
A animated menu bar with hamburger built with modern frontend techniques for responsive and reusable UI.
- CSS Hamburger Click Effect
A css hamburger click effect 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.
- Staggered Animated Hamburger Toggle Button
A staggered animated hamburger toggle button built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, BabelDifficulty
IntermediateBrowser support
Chrome 99+, Edge 99+, Firefox 97+, Safari 15.4+Features
Staggered Motion, ARIA Support, Custom Easing, Elastic Transition - Expanding Cards
A expanding cards built with modern frontend techniques for responsive and reusable UI.
- Simple Image Accordion
A simple image accordion built with modern frontend techniques for responsive and reusable UI.
- Sliding Theme Toggle Sidebar Menu
A sliding theme toggle sidebar menu built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, SCSS, JavaScriptDifficulty
BeginnerBrowser support
Chrome 59+, Edge 79+, Firefox 52+, Safari 10.1+Features
Sliding Toggle, Theme Switcher, Custom Scrollbar - Interactive Drag-and-Drop Jigsaw Puzzle
A interactive drag-and-drop jigsaw puzzle built with modern frontend techniques for responsive and reusable UI.
Technologies
Pug, SCSSDifficulty
AdvancedBrowser support
Chrome 84+, Edge 84+, Firefox 90+, Safari 15.4+Features
Zero JS, Geometric Masking, State Retention - Mobile Tab Navigation
A mobile tab navigation built with modern frontend techniques for responsive and reusable UI.
- CSS Masonry
A css masonry built with modern frontend techniques for responsive and reusable UI.
- CSS Thumbnail Transition Effects
A css thumbnail transition effects built with modern frontend techniques for responsive and reusable UI.
- Hero Section Article Gallery Hover
A hero section article gallery hover built with modern frontend techniques for responsive and reusable UI.
- Card Grid
A card grid built with modern frontend techniques for responsive and reusable UI.
- Dark Mode Toggle Switch
A dark mode toggle switch built with modern frontend techniques for responsive and reusable UI.
- Metallic Skeuomorphic Toggle Switches
A metallic skeuomorphic toggle switches built with modern frontend techniques for responsive and reusable UI.
- Custom Picker for Hover Devices Only
A custom picker for hover devices only built with modern frontend techniques for responsive and reusable UI.
- Expandable Search Bar Animation
A expandable search bar animation built with modern frontend techniques for responsive and reusable UI.
- Form Input Design
A form input design 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.
- Pure CSS Home Media (Ambilight)
A pure css home media (ambilight) built with modern frontend techniques for responsive and reusable UI.
- 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 - Expanding Flexbox Panels
A expanding flexbox panels built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptFeatures
Flexbox Animation, Blur Filter Effect, Vanilla JSResponsive
Yes - Pure CSS Panels
A pure css panels built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
BeginnerFeatures
No JavaScript, CSS Animations, Target SelectorResponsive
Yes - Color Swatch
A color swatch built with modern frontend techniques for responsive and reusable UI.
Technologies
SASS, CSS3Difficulty
IntermediateFeatures
Hover Animation, Radial Menu, CSS VariablesResponsive
Yes - Shuffling Effect in Pure CSS
A shuffling effect in pure css built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Grid, CSS :has()Difficulty
IntermediateFeatures
Pure CSS, No JavaScript, Animated Transitions - Stacked Poetic Cards
A stacked poetic cards built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLFeatures
3D Transform, CSS :has() selector, Radio Button HackResponsive
Yes - E-Commerce Card
A e-commerce card built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
hover effects, box-shadow animation, product layoutResponsive
Yes - Movie Card Interactive UI
A movie card interactive ui built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
interactive star rating, hover animations, horizontal layout - Material Card with Animated Featured Image
A material card with animated featured image built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3Difficulty
BeginnerFeatures
Cubic-bezier animation, Hover effects, Shape morphingResponsive
Yes - Material Cards
A material cards built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, FlexboxDifficulty
BeginnerFeatures
Hover effects, Responsive grid, Material DesignResponsive
Yes - 3D Flipping Cards
A 3d flipping cards built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateFeatures
3D Rotation, Hover Animation, Auto-numberingResponsive
Yes - Animated Gallery Thumbnails
A animated gallery thumbnails built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
hover animations, diagonal clip-path effect, smooth transitionsResponsive
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 - Business Card Concept
A business card concept built with modern frontend techniques for responsive and reusable UI.
Difficulty
intermediateFeatures
hover animations, smooth transitions, transform effectsResponsive
Yes - CSS Business Card
A css business card built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, jQueryDifficulty
IntermediateFeatures
3D Animation, Flip Effect, Interactive - CSS Blog Card
A css blog card built with modern frontend techniques for responsive and reusable UI.
Technologies
SCSS, CSSDifficulty
intermediateFeatures
hover-effects, slide-animation, layered-designResponsive
Yes - Animated Movie Schedule Blocks
A animated movie schedule blocks built with modern frontend techniques for responsive and reusable UI.
Technologies
Haml, SCSSDifficulty
IntermediateBrowser support
Chrome 36+, Edge 12+, Firefox 16+, Safari 9+Features
Sliding Panels, SCSS Theming, Responsive GridResponsive
Yes - Nike Product Card Interaction
A nike product card interaction built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+Features
Hover Animation, CSS Transform, Grid Layout, Product CardResponsive
Yes - Twitch Style Gradient Hover Card
A twitch style gradient hover card built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 88+, Edge 88+, Firefox 89+, Safari 15+Features
Staggered Animation, Gradient Slide, Responsive Sizing, Text SplittingResponsive
Yes - Simple Share Button
A simple share button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS, HTMLDifficulty
beginnerFeatures
Hover effect, CSS Animations, Social Media IntegrationResponsive
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 - Multi-Button Animation
A multi-button animation built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
hover-effect, pseudo-elements, text-animationResponsive
Yes - Ghost Button Animation
A ghost button animation built with modern frontend techniques for responsive and reusable UI.
Technologies
SASS, CSS3Difficulty
BeginnerFeatures
Hover Effect, Pseudo-element AnimationResponsive
Yes - Animated Ghost Button
A animated ghost button built with modern frontend techniques for responsive and reusable UI.
Difficulty
BeginnerFeatures
Hover animation, CSS VariablesResponsive
Yes - Action Button with Checkbox Trick
A action button with checkbox trick built with modern frontend techniques for responsive and reusable UI.
Difficulty
IntermediateFeatures
Checkbox hack, No-JS interactivity, State-driven UIResponsive
Yes - Download Button with Sliding Information
A download button with sliding information built with modern frontend techniques for responsive and reusable UI.
Difficulty
beginnerFeatures
hover-effect, sliding-animationResponsive
Yes - Back To Close
A back to close built with modern frontend techniques for responsive and reusable UI.
Technologies
html, css, javascriptDifficulty
beginnerFeatures
animation, icon-morphingResponsive
Yes - Close Button
A close button built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS3, HTML5Difficulty
beginnerFeatures
Hover animation, Pure CSS icon, Transform rotationResponsive
Yes



















































































