CommunityNews

CommunityNews

An Interactive Guide to CSS Transitions

The world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer Motion and React Spring have sprung up to help us add motion to the DOM.

The most fundamental and critical piece, though, is the humble CSS transition. It’s the first animation tool that most front-end devs learn, and it’s a workhorse. Even the most grizzled, weathered animation veterans still reach for this tool often.

There’s a surprising amount of depth to this topic. In this tutorial, we’ll dig in and learn a bit more about CSS transitions, and how we can use them to create lush, polished animations.

This thread was posted by one of our members via one of our news source trackers.

Most Liked

ohm

ohm

Lovely little tutorial. I especially liked the prefers-reduced-motion: reduce. I did not know that was a thing.

Jsdr3398

Jsdr3398

Ooohh this is pretty cool! I really like that you could play around with timelines :astonished:

Where Next?

Popular Frontend topics Top

First poster: bot
Writing Robust TypeScript Libraries — Sympolymathesy, by Chris Krycho. When writing a TypeScript library, it’s helpful to validate all t...
New
New
New
First poster: bot
Ashley Williams Discusses the Future of WebAssembly at the WebAssembly Summit . Williams commented on the results of a Twitter poll sh...
New
First poster: bot
Because lighter plugins mean lighter sites. https://vanillalist.top/ This thread was posted by one of our members via one of our news ...
New
First poster: claudio
You’re at a restaurant, and there’s an odd item on the menu that you’ve never heard of before, but it piques your interest. It sounds lik...
New
First poster: bot
Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it int...
New
First poster: bot
Here’s what I think: if you are building websites, you don’t need React (in most cases). I have been building websites for over nine yea...
New
First poster: bot
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, i...
New
First poster: bot
Why in 2021 would you bother making a website without js? While researching this post I found two really great sources of information. S...
/js
New

Other popular topics Top

AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
New
Exadra37
On modern versions of macOS, you simply can’t power on your computer, launch a text editor or eBook reader, and write or read, without a ...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
AstonJ
If you are experiencing Rails console using 100% CPU on your dev machine, then updating your development and test gems might fix the issu...
New
PragmaticBookshelf
“A Mystical Experience” Hero’s Journey with Paolo Perrotta @nusco Ever wonder how authoring books compares to writing articles?...
New
gagan7995
API 4 Path: /user/following/ Method: GET Description: Returns the list of all names of people whom the user follows Response [ { ...
New
AstonJ
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
PragmaticBookshelf
Author Spotlight James Stanier @jstanier James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
New
PragmaticBookshelf
Author Spotlight: Tammy Coron @Paradox927 Gaming, and writing games in particular, is about passion, vision, experience, and immersio...
New