CSS & HTML
Easy CSS Animation Using @keyframes
Learn how @keyframes work, what every animation property does, and how to add scroll-driven timelines and reduced-motion support with tested, modern CSS.
Tag: animation
CSS & HTML
Easy CSS Animation With Transitions and Transforms
Build smooth hover, toggle and entry animations with CSS transitions and the individual translate, rotate and scale properties, including @starting-style and reduced…
Layout
Split-Screen Layout With Modern CSS: Hover Panels and an Animated Dialog
Rebuild the classic two-panel landing page with flexbox, :has() hover expansion and an animated native dialog, no jQuery or animation library needed.
CSS & HTML
How to Zoom a Hero Image on Scroll with CSS
Replace the old jQuery scroll handler with CSS scroll-driven animations: a smooth, accessible hero zoom in about ten lines, plus a tiny…
CSS & HTML
Animating Background Colors With Modern CSS
Cycle, shift and transition background colors using native CSS: keyframes, @property registered variables, and color-mix(). No jQuery required.
CSS & HTML
Working with SVG: Inline Icons, Animation and Clipping
A practical guide to SVG for designers: choosing inline vs img, currentColor icons, CSS stroke animation, clip paths, accessibility and clean exports.
Design
CSS Animation Demos Worth Studying
Eleven checked, live CSS animation demos and tools covering scroll-driven animation, view transitions, loaders and 3D, plus a tested snippet you can…
CSS & HTML
Sequential Lists Without jQuery: CSS Counters and sibling-index()
Replace the old jQuery sequential list with CSS counters for numbering, sibling-index() for staggered animation, and IntersectionObserver for scroll triggers.
CSS & HTML
jQuery Effects for Designers, Rebuilt with Modern CSS and JavaScript
Ten classic jQuery designer effects rebuilt with details, CSS transitions, the Web Animations API and View Transitions, with tested code and support…
UI Components
Mac-Style Cover Flow Photo Gallery with CSS Scroll Snap
Recreate the classic Apple cover flow gallery with modern CSS: scroll snap, 3D perspective and a scroll-driven tilt animation, with accessible fallbacks…