css animation

Animating Progress

Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values:

This example has custom styles, but you get the point.

Jonathan's post shows off a method for animating a change in progress value using CSS and a touch of JavaScript while making sure that it animates properly in every modern browser. The demo he made looks pretty neat. I’m sure this is going to be one of those posts I come back to again and again.

We recently shared a post by Dave Rupert that takes an SVG approach. Jeremias Menichelli also has an alternative approach, creating a ring shape and converting it into a React component.

Making CSS Animations Feel More Natural

It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the design and the coder transcribing—designers must now know something about code, and coders must know something about design in order to effectively collaborate.

(more…)

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.

(more…)

Controlling CSS Animations and Transitions with JavaScript

The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag