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

AstonJ
Haven’t watched it yet but posting it and bookmarking the thread :nerd_face: TypeScript continues to soar in popularity…
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: AstonJ
The world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer Motion and React Spri...
New
First poster: bot
How I built a telnet chat server in 2021 with WebAssembly. I love the aesthetics of terminals and I’m not the only one, there is a whole...
New
First poster: bot
In this article, I will discuss my journey from being an anti-TypeScript developer to a developer who now couldn’t think of going back to...
New
First poster: bot
ReScript, née BuckleScript, is a state-of-the-art compiler that used to target OCaml (and Reason), but is fast moving away from its paren...
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: bot
VanillaJS v. jQuery v. hyperscript Below are comparisons of how to implement various common UI patterns in vanilla javascript, jQuery an...
New
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

Other popular topics Top

PragmaticBookshelf
A PragProg Hero’s Journey with Brian P. Hogan @bphogan Have you ever worried that your only legacy will be in the form of legacy...
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
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
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
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
PragmaticBookshelf
“A Mystical Experience” Hero’s Journey with Paolo Perrotta @nusco Ever wonder how authoring books compares to writing articles?...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1127 25299 748
New
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
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

Latest in Blogs/Talks

View all threads ❯