I need help to convert my javascript animation to css3

Currently there are two sections. while going to second section from first section, it shrinks, folds height & width of first section and unfold , enlarge height & width of second section.

Check Demo jsfiddle

Need Help for

  1. add more sections.
  2. add navigation (<ul><li><a>link 1</a></li><li><a>link 2</a></li><li><a>link 3</a></li></ul>)
  3. create in & out class (example of in-out class using switch case)
  4. Instead of sections on same page, redirect to anoter page e.g. from index.php to about.php using javascript (if possible)

Having problem while creating classes for animation.

To make page redirection you can use this js code (you can still add a time delay):

function opennewtab(url )
  var win=window.open(url, '_blank');

I don't quite remember how to correctly add navigation and correctly distribute classes, so you can see examples here or see how this is done on this site.