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