170+ CSS transition Examples (Page 6)

A responsive card grid on Flexbox, using SCSS with variables for easier style management. A complex transition effect fires on :hover, synchronously animating the box-shadow for a “lift” effect, text colors, and the width of a dynamic header underline.

A practical approach where a spectacular 3D flip is implemented in pure CSS, complemented by a small jQuery script for dynamically substituting background images from data-image attributes.

A classic 3D card flip on :hover within a perspective container, plus an elegant solution for auto-numbering items using CSS counters.

A SCSS card with a multi-layered structure, where a text block smoothly “slides up” on hover. Dimensions and colors are defined by variables, while z-index and position: absolute are used to manage layers of text and overlays that darken the background for better readability.

This interactive play button uses synchronized SVG stroke manipulation for its hover effect: the solid stroke fades out and dashes off, while the dotted stroke fades in and increases its width to take its place.

A “split-button” effect in pure CSS where two social media buttons, hidden outside a circular container with overflow: hidden, slide in on hover of their common parent. An ::after pseudo-element displays default text, which is then overlapped by the buttons with a higher z-index, creating a smooth UI transition.

A technique for creating a two-state button where overflow: hidden on the parent container hides content that moves outside its bounds. A transition: margin .4s ensures the smooth animation of .face-primary’s shift on hover.

A “close” icon created in pure CSS from two pseudo-elements. On hover, both lines forming the cross smoothly rotate 180 degrees using transform: rotate(180deg) and transition.

Creation of a complex icon from three <span> elements that form a “back” arrow in one state and reconfigure into a cross in another state with the .open class. JavaScript is used solely for toggling the state.

This multi-button group features a simultaneous text shift and icon slide-in effect, achieved by animating the right position and opacity of the span:after pseudo-element on hover.

The button features a complex, non-linear hover effect powered by a cubic-bezier transition curve and CSS transform: translate3d applied to the inner .mask element, creating a sweeping diagonal light wipe effect.

This SASS component defines two aesthetically consistent styles (.bttn and .bttn-dark) using centralized color variables and implements a distinctive “slide-out” hover effect by animating the ::before pseudo-element’s left and right properties from 50% to 0.

A complex mobile app UI built entirely on the CSS “checkbox hack” - four independent <input type="checkbox"> elements are used to control different states: opening a menu, showing an overlay, switching cards, and hiding elements.

A demonstration of how two independent, infinite @keyframes animations can be layered to create a complex visual sequence. One set of animation-delay manages the colored transitions, while the second controls the smooth appearance of the background images, creating a dynamic slideshow effect.

Showcases advanced layering using z-index and :after pseudo-elements to introduce a large, animated overlay with new content upon hover. The design strategically uses this overlay to conceal the primary <figcaption> via a strong negative translateY transformation.

Transform a simple image block into a rich UI card by combining semantic markup with complex visual styling. The design uses a background expansion technique for the caption, where a growing ::before element creates a clean, animated fill-in effect upon interaction.

This demo achieves a striking 3D page-flipping effect by masterfully employing perspective and transform-style: preserve-3d on the book container. Crucially, the animation uses rotateY(-180deg) with a fixed transform-origin: left center to simulate a physical book spine opening via a smooth transition.

A dynamic React vertical timeline that utilizes a custom useScrollPosition hook with useLayoutEffect for high-precision scroll position tracking and creating a “fade-in on scroll” visual effect.

This demo showcases a visually striking modal: the opening/closing effect is achieved entirely through pure CSS transitions and aggressive scaling, managed by toggling a single class based on the React state.