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:

Popular Frontend topics Top

First poster: PaigePalmer
Progressive Web Apps (PWAs) are starting to get some attention. For instance, Amazon is using it for game streaming service on iOS. PWAs ...
New
First poster: bot
Background: Lots of discussions and arguments on Twitter, GitHub, blogs and mailing lists. A summary can be found in eg. this GitHub issu...
New
First poster: bot
Decided to write this blog post because I couldn’t find any documentation or online examples like the one I’m sharing here. Every example...
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
ES2021 features list as approved by the Ecma General Assembly Logical Assignment Operators (&&= | Numeric Separators (1_000) ...
/js
New
brainlid
You are storing some Phoenix LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the use...
New
First poster: bot
TypeScript’s never type is very under-discussed, because it’s not nearly as ubiquitous or inescapable as other types. A TypeScript beginn...
New
ragamuf
A little halloween hocus-pocus on the value proposition of having a reliable test suite in place. You are not scared, are you?
New
Johannes-Werbrouck
In this article, we’ll make an app more exclusive by requiring an invite to register. Along the way we’ll touch on topics like middleware...
New
karolina.curiosum
Bumblebee & Stable Diffusion & Phoenix Live View meets in one place! Learn how to create a live prompt generating Stable Diffusio...
New

Other popular topics Top

New
AstonJ
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
AstonJ
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
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
Rainer
Not sure if following fits exactly this thread, or if we should have a hobby thread… For many years I’m designing and building model air...
New
AstonJ
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
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
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
PragmaticBookshelf
Author Spotlight: Karl Stolley @karlstolley Logic! Rhetoric! Prag! Wow, what a combination. In this spotlight, we sit down with Karl ...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New