Candy Demo

Doodling with CSS3.

Candy demo is a CSS-based animation. It takes advantage of some nice CSS features:

  • keyframe-based animations
  • gradients and gradient stacking
  • viewport-based sizing
  • transforms

Candy demo screenshot

 

There’s not a single picture in the entire demo. JavaScript is used just for convenience and code clarity to automatically add vendor prefixes (-prefix-free), but no JS is required to run the demo in standard-compliant browsers.

The candy is made of four identical parts, each consisting of three radial gradients. Latter three are rotated by 90, 180 and 270 degrees, respectively. Then, entire candy is clipped to a circle using the border-radius property and another element is created over it to add gradient-based shadow.

Rays of light are made from two identical parts, second one flipped vertically using a scaleY transform with negative argument. Each part is created by clipping a nested div to its parent’s boundaries. Then, rays are rotated by adequate angles and an animation is applied.

Falling cookies in the background („cookieflakes”) are just smaller copies of the big one, each one with three animations applied: rotation, falling and horizontal waving. Each animation has separate properties: waving is faster than the other two and it’s reversed upon completion, instead of restarting.

See the demo on its page.

Supported browser versions: Chrome 26+, FF 19+, IE 11, Opera 15.