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

New
First poster: bot
As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving thanks to new ...
/js
New
First poster: bot
The Elm Architecture is one of the great innovations Elm brought to the software industry. But one of the questions that often comes up i...
New
First poster: bot
tldr: the level of HTTP/3 support in servers are surprisingly high considering very few clients enable it by default. This thread was...
New
First poster: AstonJ
In this article, I will share with you some very useful HTML tips . Enjoy! ** Post will be updated regularly with new tips!* The loa...
New
First poster: bot
JavaScript has come a long way since I knew it as the “D” in DHTML. For anyone like me, who’s been reluctant to use the latest syntax tha...
/js
New
First poster: bot
Backend languages in the browser have been a thing for a long time. Google Web Toolkit would compile Java applications into JavaScript, a...
New
First poster: bot
I had the chance to toy around with Deno recently. And with “toy around” I mean dissecting it into little pieces and see how the sausage ...
New
brainlid
On your LiveView page, you are using a custom component. You want to be able to pass HTML attributes into the component, but the componen...
New
First poster: OvermindDL1
I have to admit: as I’ve watched Tailwind enthusiastically adopted by more and more of the frontend community, I’ve remained skeptical. B...
New

Other popular topics Top

New
AstonJ
SpaceVim seems to be gaining in features and popularity and I just wondered how it compares with SpaceMacs in 2020 - anyone have any thou...
New
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 28379 760
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
hilfordjames
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New
PragmaticBookshelf
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
New