Skip to main content
CSS-Tricks
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Shuffle
Search

Articles Tagged
animation

155 Articles
{
,

}
Direct link to the article Experimenting With Scroll-Driven corner-shape Animations
animation corner-shape Scroll Driven Animation

Experimenting With Scroll-Driven corner-shape Animations

The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
Daniel Schwarz on Mar 23, 2026
Direct link to the article CSS Animations That Leverage the Parent-Child Relationship
animation

CSS Animations That Leverage the Parent-Child Relationship

When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage.
Preethi on Oct 24, 2025
A series of six dits in a single row. Five are the same size and colored dark gray. The fifth item is scaled slightly smaller and colored gold.
Direct link to the article Sequential linear() Animation With N Elements
animation CSS functions

Sequential linear() Animation With N Elements

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
Temani Afif on Oct 15, 2025
Gemini sparkle icon logo surrounded by four large shapes dimmed in the background. A mouse cursor is on top of the logo.
Direct link to the article Recreating Gmail’s Google Gemini Animation
animation

Recreating Gmail’s Google Gemini Animation

John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.
John Rhea on Sep 26, 2025
Direct link to the article CSS Typed Arithmetic
animation CSS functions math

CSS Typed Arithmetic

Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.
Amit Sheen on Sep 24, 2025 Updated on Sep 30, 2025
interface designed to appear like an elevator button panel, with four buttons labelled 1, 2, 3, 4, on the left side is a block containing an arrow pointing up as the direction the elevator is traveling
Direct link to the article CSS Elevator: A Pure CSS State Machine With Floor Navigation
animation custom properties forms

CSS Elevator: A Pure CSS State Machine With Floor Navigation

In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.
Christian Sabourin on Aug 29, 2025
Direct link to the article A Radio Button Shopping Cart Trick
animation forms UI/IX Design

A Radio Button Shopping Cart Trick

Here's an approach for animating products added to a shopping cart that handles an infinite number of items using a variation of the ol' Checkbox Hack.
Preethi on Aug 27, 2025
Direct link to the article 3D Layered Text: Interactivity and Dynamicism
animation background custom properties

3D Layered Text: Interactivity and Dynamicism

In this third and final chapter, we’re stepping into interactivity by adding JavaScript, starting with a simple :hover effect, and ending with a fully responsive bulging text that follows your mouse in real time.
Amit Sheen on Aug 22, 2025
Direct link to the article 3D Layered Text: Motion and Variations
animation typography

3D Layered Text: Motion and Variations

In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.
Amit Sheen on Aug 20, 2025 Updated on Aug 22, 2025
  • 1
  • 2
  • 3
  • ...
  • 18
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top