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

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
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
First poster: bot
The Zen of index.html. Web development has become a very complex field with many branches and tools to master. In this article, I sugges...
New
First poster: bot
A WebAssembly Powered Augmented Reality Sudoku Solver. An Augmented Reality Sudoku solver using the WebAssembly build of OpenCV (a C++ ...
New
First poster: bot
When web accessibility comes to mind most people think of just adding an alt text to an image, but there is much more to it! This article...
New
First poster: bot
Last year I created Pomodone, a small time tracking application based on the Pomodoro technique of working in 25 minute intervals. It’s a...
New
First poster: bot
This guide is intended to cover everything you need to know about creating, manipulating and comparing strings in JavaScript. Extra tips...
New
First poster: bot
User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us...
New
First poster: bot
Implementing an app redesign is never routine nor easy. Two weeks after I was hired at Polytomic, I began implementing the app’s first re...
New
First poster: OvermindDL1
I have to admit: as I’ve watched Tailwind enthusiastically adopted by more and more of the frontend community, I’ve remained skeptical. B...
New

Other popular topics Top

PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
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
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
AstonJ
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
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
hilfordjames
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
New