Keyframe Animation Syntax

#Basic Declaration & Usage

@-webkit-keyframes NAME-YOUR-ANIMATION

Далее »


A Comparison of Animation Technologies

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…

Далее »


Understanding CSS Timing Functions

OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when it comes to CSS animation, and you could well be surprised by just how much you can do with it.

First of all, let’s set the scene and ensure we’re all familiar with the scenarios…

Далее »


High Performance Animations

Take a look at this side-by-side slow motion video of the same animation:

One is done with transforms, the other isn’t. You can see what a difference it makes, so let’s take look at…

Далее »


Future Use: CSS Motion Paths

Update 10/2016: Several things have changed to CSS Motion Path in the year since I posted this. For the most up to date information, I have a new post that explains these changes: CSS Motion Path as of October 2016

As I started exploring the Web…

Далее »