'simple' CSS3 animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


css animation fun

I like to animate things, and this is my playground for simple CSS3 animations.

diamond - a simple alternating diamond pattern

anitspin - a 4-petal pattern where each sphere is part of an inner rotation that itself is part on outer rotation in the opposite direction.

two-beat weave - a circular pattern that moves between the background and foreground while alternating sides

three-beat weave - a similar pattern to the two-beat weave only each sphere does two rotations on one side and one on the opposite

butterfly - two spheres rotating in the same plane but in different directions, centered on the same point

thread the needle - a similar pattern to the butterfly but each sphere moves back and forth between the background and foreground

mercedes (triquetra vs extension) - one sphere does a simple rotation while the other does an 3-petal antispin inside of it. both move at the same speed