Clackers CSS Animation

Clackers or Loaders for lack of a better name.

Here are three versions of this illusion, reminiscent of the Clackers toy.

In the first example, the two ‘barbells’ are rotating opposite directions,

which can create the optical illusion of the balls bouncing off each other.

In the second, the lower two balls are always blue and upper two are red.

It is the same as the first, only the colors are changing.

In the third, the balls are actually bouncing off each other.

The ‘barbells’ rotate until contact and then reverse direction.