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
Two ways you can take advantage of types in JavaScript (without TypeScript) - The Blinking Caret. This blog post describes how you can e...
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
The TypeScript type system is immensely powerful, and while the language itself is, of course, Turing complete, so is the type system its...
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: bot
Humio software engineers Thomas Anagrius and Jeroen Engels sat down to talk about why they got involved with Elm for web-based front-end ...
New
First poster: rustkas
What is TCO? Tail-call optimization (TCO) is a very neat trick that the Elm compiler does to make recursive functions a lot more performa...
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
CSS can be hard to grasp when you’re starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-...
New
brainlid
In episode 59 of Thinking Elixir, we talk with Joel Kemp about his experience introducing Elixir at Spotify. We learn about the concurren...
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

Other popular topics Top

PragmaticBookshelf
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
New
wolf4earth
@AstonJ prompted me to open this topic after I mentioned in the lockdown thread how I started to do a lot more for my fitness. https://f...
New
DevotionGeo
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
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
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
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
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
AstonJ
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New