How to use CSS3 Transitions ?

Answer 1

There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.

CSS

.foo {
   opacity: 0;
   transition: all 400ms;
}
.foo.active {
   opacity: 1
}

The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().

Edit

Another method fadeToggle() i don't know much about it but you can search and use this:

$('.back-fade').click(function(){
  $('#welcome-content').fadeToggle(2000);
  $('#configure-content').fadeToggle(2000);        
});