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
Vue vs React: Best Choice for Startups. “I just have one question for you: Why Vue? I hope you’re not rolling your eyes thinking - “ah n...
New
New
First poster: bot
Why I Love Tailwind. Why Tailwind is blowing up, why I (the creator of styled-components) love it and how I avoid the downsides of atomi...
New
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
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
Add WebAssembly, get performance. Is that how it really works? The incredibly unsatisfying answer is: It depends. It depends on oh-so-ma...
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
XSukhpreet
Mine is Firebase because it is easy to learn and fast .
New
First poster: bot
Since the Humio web client is built in Elm, I’d like to share some of our learnings with Elm over the years. Specifically, working with U...
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

AstonJ
We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
New
rustkas
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New