This page contains animations that don't do much, so they shouldn't use a lot of CPU. Each test include a 'color' and 'opacity' test, since these may follow a different code path in browsers in terms of timers.

High frequency animations

These animations however do animate every frame, but they're useful to get a baseline of how much CPU the browser uses in these cases.

Color

Opacity

setTimeout

This animations is driven by setTimeout. Again, this helps to get a baseline.

Long delay

These animations have a 1 minute delay. They should not use similar CPU to a high-frequency animation.

Color

Opacity

Animation steps

These animations are 10 seconds long but steps(2) is specified in the animation. They should not use similar CPU to a high-frequency animation.

Color

Opacity

Animation keyframe steps

These animations are 10 seconds long but steps(2) specified in the animation keyframe. They should not use similar CPU to a high-frequency animation.

Color

Opacity

Discrete values

This animation animates a discrete value in CSS. It shouldn't use similar CPU to a high-frequency animation.

The JS animation animates font-family as I couldn't get it to animate content.

Mostly same values

These animations do something at the start, but then the computed values are stable. They should not use similar CPU to a high-frequency animation.

Color

Opacity

Empty animation

This is a 30s animation that doesn't have any keyframes. This should not use similar CPU to a high-frequency animation.