Tony Edwards

Solar System

This is a simple solar system animation using CSS3 transitions as opposed to javascript.

I coded this to play around with CSS based animations as they (often) have better performance on mobile devices due to GPU acceleration. I plan on using CSS transitions to provide styled user feedback on future websites.

Whilst I was coding this I noted that there was allot of repetition and browser prefixes in the CSS. I’d heard allot about SASS on the Shop Talk Show and this seemed like a great little project to try it out on. I used ‘Prepros‘ to compile the SCSS files, which includes ‘Auto Prefixer‘, something very handy when dealing with CSS animations.

The initial tutorial is from the ‘HTML5 and CSS3 genius guide’ by imagine publishing.

View project on GitHub

Skills, Tools and Libraries

  • CSS
  • HTML
  • SASS
Visit the Site