149 CSS transition Examples (Page 2)

A skeuomorphic toggle design achieved by combining multiple linear-gradients for the body and box-shadow to create a volumetric effect. The smooth switching animation and “glow” in the active state are implemented via transition with a custom cubic-bezier curve.

A demonstration of a two-phase menu reveal animation - a fast transform: translateX shift and a slower width expansion are defined in a single transition property, creating a distinct visual effect.

A toggle switch implemented using a single <input type="checkbox"> and pseudo-elements. The “button” effect and its movement are achieved through complex, multi-layered box-shadow and the shifting of the ::before element.

A navigation menu with a neon glow and a complex hover effect. Icons and text use the CSS drop-shadow filter to create a glow effect, while the element’s color is controlled via an inline CSS variable --clr.

A full vertical slider with scroll-snap points. The navigation indicator is dynamically animated using the Intersection Observer API, which tracks when a slide enters the viewport.

A skeuomorphic toggle button where the entire press effect is implemented in pure CSS using box-shadow and transform: scale(). JavaScript is only used to toggle the WAI-ARIA attribute aria-pressed on click.

A multi-level FAQ accordion implemented in vanilla JS. The classic technique of setting panel.style.maxHeight = panel.scrollHeight + "px" is used to expand panels, ensuring a smooth height transition

An animated underline effect for navigation where an SVG path segment smoothly “flows” from one item to another - on click, JS dynamically calculates and sets the stroke-dasharray for the SVG, creating the illusion of movement.

A minimalistic example of event-driven SVG animation where the geometry is rebuilt both by a setInterval timer and user clicks - the key technique is the direct manipulation of the d attribute via setAttribute, which triggers a CSS transition to create organic movement without complex animation logic in JS.

An animated loader button using jQuery and SCSS, where progress is implemented via an @for loop that generates 101 linear-gradient rules - the state is changed through a custom attribute updated by JS.

A responsive accordion in Vue.js where the panel expansion effect is implemented via CSS animation of the flex property - the state is changed with a simple click, without complex logic in JS.

An implementation of a responsive accordion using Flexbox, where the smooth expansion of sections is achieved by animating the CSS flex property. A vanilla JS script is used only to toggle the .accordion__item_active class on click.

An impactful loading icon built on stroke-dashoffset animation for an SVG circle and swinging @keyframes for the icon. A minimalistic jQuery script with setTimeout is used to manage the loading cycle by adding state classes.

A simple button group where the indicator’s position is calculated in JS based on the button’s data-num attribute - the offset is set via style.marginLeft, while the active state is animated using CSS.

Explore the technique of creating a three-line hamburger using a single <span> tag and two pseudo-elements, - which are then animated into an ‘X’ via a combination of CSS properties rotate(45deg) and translate.

The “Accordion/FAQ” functionality is implemented using pure JavaScript, which handles the click on the parent element and toggles the active class on the FAQ container. The visual highlight is the icon change via CSS display: none/block properties.

This interactive toggle switch demonstrates advanced animation work, where delayed class toggling in jQuery coordinates the knob movement and a stylish “color fill” text effect, created in CSS using overflow: hidden; and pseudo-elements.

An interactive timeline where JS synchronizes CSS transform: translateX for scrolling, background-position for parallax, and classes for sprite animation.

This simple counter demonstrates clean vanilla JavaScript functionality: counter management, class switching for instant color scheme change based on the number’s sign. The stylistic focus is on “Soft UI” aesthetics.

A sleek, animated segmented control using GSAP for smooth slide and a subtle 3D-like tilt effect on click, providing a polished micro-interaction.

This loader achieves a liquid-smooth animation by calculating progress on the JavaScript requestAnimationFrame loop and programmatically updating the CSS linear-gradient background property to create dynamic color shifts.

An advanced UI component demonstrating pure CSS capabilities to create a complex 3D flip effect, with the added use of animated SVG strokes and CSS variables for an instant change of color scheme and media content.

An ultra-lightweight slider showcasing a clean implementation of essential functionality (including infinite looping and arrow navigation) via direct CSS positioning manipulation using Vanilla JavaScript.

Showcases a stylish, interactive monster card slider, utilizing pure HTML and CSS for complex design, custom typography, and subtle image animations with a zoom/lift effect on hover.

A clean frontend implementation of an interactive button pair, where the history logic (Undo/Redo state) is managed by minimal Vanilla JS, and the rich clock rotation and dial animation is fully delegated to CSS transforms.

An interactive, responsive content component built on vanilla JavaScript (Swiper), highlighting CSS transitions for the slide change effect, complete with custom navigation and modular styling via SCSS for easy customization.

A slick, animated vertical tabs component styled with Tailwind CSS, leveraging Vue.js for reactive state management and utilizing CSS transform properties for ultra-smooth indicator movement.

An elegant implementation of the FLIP animation principle to create a stunning shared element transition between two views, where JS calculates the positions and CSS performs the inverse transform for a smooth change.

A simple example of dynamic shape and style modification of an element using JavaScript, clearly showing how to toggle CSS properties on a click event.

A simple yet effective horizontal slider built with Vanilla JavaScript controls the scroll via margin-left, leveraging 100vw CSS units for precise, full-viewport step movement.

This demo showcases a dynamic split-screen layout where hovering over a column triggers a full background image reveal and slides in a content box. The interactive effect is efficiently managed by toggling an .active class with a simple jQuery mouseover event, while all animations are handled purely by CSS transitions.

A sophisticated yet elegant content switching animation using dynamic CSS variables and @keyframes to create the “running dots” background effect. The background transition itself is achieved through a smooth scaling effect using transform-origin and translateX.

A pure CSS accordion based on native <details>/<summary> elements, where the standard marker is hidden, and a custom animated chevron arrow is created and controlled exclusively via clip-path: polygon() and the rotate property upon expansion.

A stylish custom layout (character profile card) built entirely on CSS positioning and content switching using HTML radio inputs without JavaScript, effectively creating pure CSS tabs.

A showcase of the creative application of clip-path to create an “unfolding” image effect on hover, where the interaction not only changes the shape but also uses z-index to elevate the element and overlap neighboring tiles.

This interactive component features a visually striking dropdown effect where the menu container morphs into shape using pure CSS animation of the SVG stroke-dashoffset property. It uses a separate SVG element with a Gaussian blur filter to create a subtle, soft shadow that follows the menu’s outline when expanded.

This is a fully responsive accordion slider built with vanilla JavaScript and CSS, handling both click and keyboard arrow events for seamless slide navigation.

An impressive menu example where all visuals are built with pure CSS and SVG. Clicking the burger icon triggers smooth animations for gradients, SVG arcs, and the background, while changing the overall page state with a single class.

This demo is a masterclass in progressive enhancement, applying advanced styling only on hover-capable devices that support appearance: base-select. The fluid dropdown animation is powered by @starting-style and transition-behavior: allow-discrete, enabling transitions on previously non-animatable properties.

clip-path controls the shape of the viewport (from a point to a full frame), while transform applies a subtle scaling effect to the image, creating a cinematic reveal.

A demonstration of advanced synchronization between the ResizeObserver API and the Popover API, where the Observer monitors the notification’s size change to automatically dismiss it once the height hits zero. It uses @starting-style and transition to create a smooth and controlled fade-out effect for the popover element.

An elegant UI element using the “frosted glass” effect (backdrop-filter), enhanced with complex box-shadow and pseudo-elements for depth and a realistic, shimmering glare.

A flexible and customizable sidebar built with CSS Custom Properties - sizes, spacing, and colors are easily configurable. The complex choreography of element appearance is achieved through transition-delay, and tooltip content is sourced from data-* attributes.

Efficient layout using CSS Grid to stack cards on top of each other, with dynamic layer control via z-index and the :has() selector to determine the position of the next element; the image animation includes movement and straightening of the rotation upon selection.

A dynamic card carousel/stack technically driven entirely by CSS custom properties and the :has() selector; interactivity is achieved via the “Radio Button Hack” (hidden input[type="radio"]), where selecting one card recalculates variables for all others, creating a smooth 3D transformation effect and dynamic stacking order; a decorative dotted background and a responsive grid layout complement the functionality.

A high-performance, smooth accordion that expands to the content’s natural height, looking and feeling like a complex JS solution but running entirely on the browser engine.

This is a comprehensive library of pure CSS input animations, triggered by the :focus pseudo-class. The effects are created by transitioning the width and height of a sibling <span> styled as a border or background, showcasing a wide range of sophisticated, JS-free micro-interactions.