“Sunshine” CSS Animation Demo

The Sunshine demo is a pure CSS experiment (no javascript), and like the Hearts demo, is an offline web app as well.


This demo:

  • Works like an app (manifest.json): icon, fullscreen, offline (cache.manifest), locks orientation.
  • Uses CSS animations to drive all motion.
  • Uses CSS positions to adapt to orientation and screen size changes.
  • Uses CSS drop shadows to give a sense of depth.


Looks great on a phone when added to the home screen.


Live Demo (link), or screenshot: