Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
animation

123 Articles
{
,

}
Direct link to the article Animating CSS Width and Height Without the Squish Effect
animation border-radius

Animating CSS Width and Height Without the Squish Effect

Direct Link

The first rule of animating on the web: don’t animate width and height. It forces the browser to recalculate a bunch of stuff and it’s slow (or “expensive” as they say). If you can get away with it, animating …

Avatar of Chris Coyier
Shared by Chris Coyier on Mar 5, 2020 (Updated on Mar 17, 2021)
animation hover links

4 Ways to Animate the Color of a Text Link on Hover

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.…

Avatar of Katherine Kato
Katherine Kato on Mar 3, 2020
Direct link to the article How to Turn a Procreate Drawing into a Web Animation
animation drawing handdrawn procreate web animation

How to Turn a Procreate Drawing into a Web Animation

I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from painting at home are basic things, like setup, cleaning brushes, proper ventilation, and …

Avatar of Sarah Drasner
Sarah Drasner on Jan 20, 2020
Direct link to the article How to Animate on the Web With GreenSock
animation GreenSock GSAP SVG web animation

How to Animate on the Web With GreenSock

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: …

Avatar of Sarah Drasner
Sarah Drasner on Jan 13, 2020 (Updated on Jan 20, 2021)
Direct link to the article #176: Working with Framer Motion
animation framer react

#176: Working with Framer Motion

Matt Perry from Framer and I take a look at the React animation library Framer Motion.

First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. …

Avatar of Chris Coyier
Chris Coyier on Oct 28, 2019
Direct link to the article Let’s Make a Fancy, but Uncomplicated Page Loader
animation beginner fade loader

Let’s Make a Fancy, but Uncomplicated Page Loader

It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve “perceived” performance — that is, making it feel as though the …

Avatar of Maks Akymenko
Maks Akymenko on Oct 15, 2019
Direct link to the article Ghost Buttons with Directional Awareness in CSS
animation buttons hover

Ghost Buttons with Directional Awareness in CSS

It would surprise me if you’d never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. …

Avatar of Jhey Tompkins
Jhey Tompkins on Sep 13, 2019
Direct link to the article Various Methods for Expanding a Box While Preserving the Border Radius
animation clip-path CSS scaling transform transition

Various Methods for Expanding a Box While Preserving the Border Radius

I’ve recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there’s a rectangle with rounded corners expanding in the back.…

Avatar of Ana Tudor
Ana Tudor on Sep 6, 2019 (Updated on Sep 9, 2019)
Direct link to the article Bounce Element Around Viewport in CSS
animation css animation viewport units

Bounce Element Around Viewport in CSS

Let’s say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something.

You’d probably be tracking the X location of the element, increasing or decreasing it in a time loop …

Avatar of Chris Coyier
Chris Coyier on Aug 19, 2019
Direct link to the article CSS Animation Libraries
animation transition

CSS Animation Libraries

There are an awful lot of libraries that want to help you animate things on the web. These aren’t really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to …

Avatar of Chris Coyier
Chris Coyier on Jul 22, 2019
Direct link to the article Animating with Clip-Path
animation clip-path SVG animation

Animating with Clip-Path

clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric …

Avatar of Travis Almand
Travis Almand on Jul 9, 2019
  • Newer
  • 1
  • ...
  • 3
  • 4
  • 5
  • ...
  • 12
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top