CSS Animation Demo

This desktop site, for which I also produced all of the graphic content and written copy, explores some different ways to create and use pure CSS animation with text, borders, layout, positioning, shapes, SVGs and the <clip-path> property.

The basic principle behind animating with CSS involves setting a name and duration for the action, and then defining the desired speed and number of repetitions it should make (or leaving these at default values). The animation name is then applied to the @keyframes tag, within which specific element values are defined at precise points over the full length of one animation cycle from beginning to end. The browser will smoothly render the values in between over the specified time period to give the overall impression of change or motion

CSS animation is a key part of interaction design, and helps to makes web content more dynamic and engaging without unduly increasing file sizes or having noticable adverse affects on loading speeds. Some useful applications of animation on the web include hover state transitions; image carousels, slideshows or transformations; and simple motion graphics.

The site is currently best supported in the Chrome and Opera browsers, and is not compatible with mobile OS. View the CSS animations.