Stephanie Briones

CSS3 Animations: An Experiment

My newest apprenticeship assignment was to select something from the book Visual Grammar by Christian Leborg and recreate the object(s) while adding CSS3 Animations.

After flipping through the book several times, keeping in mind that whatever I selected had to be animated based on the descriptions in the book, I decided on the following three:

1. Diffusion.

“An irregular dispersion of objects in a composition is called diffusion. The structure can gradually shift from being fine to coarse, and from sparsely to highly saturated.”

This section is made up of 200 absolutely positioned spans and uses transitions to make the dots larger and smaller, (obviously this isn't the most practical option, but it was the "prettier" way to do it).

Not absolutely positioning each span resulted in a choppy hovering experience. Each dot was shoving all of the other dots out of the way. For this section of the project, transitions worked best for me.

2. Negative/Positive.

“The terms negative and positive relate to opposite values such as opaque and transparent, light and dark, convex and concave, solid and hollow.”

The two discs are rotating 360° showing an example of the effect of negative and positive colors on negative and positive backgrounds.

3. Overlapping.

“When parts of an object lie above parts of another object, the first object overlaps the second one.” The red, transparent circle hovers over the black showing an example of objects overlapping.

Here is my Project. Keep in mind that CSS Animations are only supported in Webkit browsers and Firefox.