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
A WebAssembly Powered Augmented Reality Sudoku Solver. An Augmented Reality Sudoku solver using the WebAssembly build of OpenCV (a C++ ...
New
First poster: bot
WebAssembly has been one of the trendiest intermediate representations since a while. However, its definition of safety means preventing...
New
First poster: bot
JavaScript allows calling a function with a different number of arguments than the expected number of parameters, i.e., one can pass fewe...
/js
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
Backend languages in the browser have been a thing for a long time. Google Web Toolkit would compile Java applications into JavaScript, a...
New
XSukhpreet
Mine is Firebase because it is easy to learn and fast .
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: 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

Devtalk
Hello Devtalk World! Please let us know a little about who you are and where you’re from :nerd_face:
New
PragmaticBookshelf
Free and open source software is the default choice for the technologies that run our world, and it’s built and maintained by people like...
New
AstonJ
Or looking forward to? :nerd_face:
503 14742 279
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
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
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
PragmaticBookshelf
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New