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
Libsodium has been fully supporting WebAssembly as a target for quite a long time. This includes its built-in benchmark suite, that can r...
New
First poster: bot
Just one year before the first web page went live in 1991, Microsoft began shipping perhaps the most well-known icon font, Wingdings. How...
New
First poster: bot
Hey! We’re getting really close to releasing React + Vue support for Tailwind UI, so I thought it would be interesting to share some of t...
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
View in full here: https://kryogenix.org/code/browser/everyonehasjs.html This thread was posted by one of our members via one of our ne...
/js
New
AstonJ
I love videos like this and it follows the same theme as @jaeyson’s thread here - I reckon the @ElixirCasts crew should consider experime...
New
First poster: bot
Why in 2021 would you bother making a website without js? While researching this post I found two really great sources of information. S...
/js
New
sundi
Learn to customize the Error HTML module in Phoenix LiveView, while enhancing the UX and retaining the typed URLs on branded 404 pages. ...
New

Other popular topics Top

PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
New
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New