Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
animation

130 Articles
{
,

}
Direct link to the article Transitioning to Auto Height
animation transition

Transitioning to Auto Height

I know this is something Chris has wanted forever, so it’s no surprise he’s already got a fantastic write-up just a day after the news broke. In fact, I first learned about it from his post and was unable …

Avatar of Geoff Graham
Geoff Graham on Jun 28, 2024 (Updated on Jul 11, 2024)
Direct link to the article Moving Backgrounds
animation background-image background-position

Moving Backgrounds

We often think of background images as texture or something that provides contrast for legible content — in other words, not really content. If it was content, you’d probably reach for an <img> anyway, accessibility and whatnot.

But there are …

Avatar of Saleh Mubashar
Saleh Mubashar on Feb 9, 2023
Direct link to the article Animating CSS Grid (How To + Examples)
animation grid grid-template-columns grid-template-rows

Animating CSS Grid (How To + Examples)

I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid has technically supported animations for a long time, as it’s baked right …

Avatar of Daniel Schwarz
Daniel Schwarz on Jan 25, 2023
Direct link to the article So, you’d like to animate the display property
animation display transition

So, you’d like to animate the display property

The CSS Working Group gave that a thumbs-up a couple weeks ago. The super-duper conceptual proposal being that we can animate or transition from, say, display: block to display: none.

It’s a bit of a brain-twister to reason …

Avatar of Geoff Graham
Geoff Graham on Dec 15, 2022
Direct link to the article Responsive Animations for Every Screen Size and Device
animation canvas flip GSAP SVG animation

Responsive Animations for Every Screen Size and Device

Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the web pretty baffling.

Video graphics are designed within a specific ratio and …

Avatar of Cassie Evans
Cassie Evans on Oct 20, 2022
Direct link to the article Pure CSS Bezier Curve Motion Paths
animation

Pure CSS Bezier Curve Motion Paths

Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?
Avatar of Lu Wang
Lu Wang on Oct 17, 2022 (Updated on Oct 19, 2022)
Direct link to the article Interpolating Numeric CSS Variables
@property animation custom properties

Interpolating Numeric CSS Variables

We can make variables in CSS pretty easily:

:root {
  --scale: 1;
}

And we can declare them on any element:…

Avatar of Geoff Graham
Geoff Graham on Aug 30, 2022 (Updated on Sep 1, 2022)
Direct link to the article How I Chose an Animation Library for My Solitaire Game
animation GSAP strategy

How I Chose an Animation Library for My Solitaire Game

There is an abundance of both CSS and JavaScript libraries for animation libraries out there. So many, in fact, that choosing the right one for your project can seem impossible. That’s the situation I faced when I decided to build …

Avatar of Holger Sindbaek
Holger Sindbaek on Jun 29, 2022
Direct link to the article Single Element Loaders: The Spinner
animation gradients loader mask pseudo elements

Single Element Loaders: The Spinner

Making CSS-only loaders is one of my favorite tasks. It’s always satisfying to look at those infinite animations. And, of course, there are lots of techniques and approaches to make them — no need to look further than CodePen to …

Avatar of Temani Afif
Temani Afif on Jun 10, 2022 (Updated on Aug 27, 2023)
Direct link to the article A CSS Slinky in 3D? Challenge Accepted!
3d animation animation-delay

A CSS Slinky in 3D? Challenge Accepted!

Braydon Coyer recently launched a monthly CSS art challenge. He actually had reached out to me about donating a copy of my book Move Things with CSS to use as a prize for the winner of the challenge — …

Avatar of Jhey Tompkins
Jhey Tompkins on May 12, 2022
GSAP Flip plugin logo.
Direct link to the article GSAP Flip Plugin for Animation
animation flip GreenSock

GSAP Flip Plugin for Animation

Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post:

FLIP, coined by Paul Lewis, is an

…
Avatar of Chris Coyier
Chris Coyier on Feb 15, 2022
  • 1
  • 2
  • 3
  • ...
  • 12
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

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