Q:

Delaying animations and showing only on scroll

Actually this site has what I want: http://www.3magine.com/our-work/
I can see that all of the animations are done with css3, but how do they delay the animations and show the content only on scroll? 
without javascript it is not impossible as I understand? 

A:

To answer your last question, no, this cannot be accomplished with strictly CSS (and why would you want too, JS is awesome). 
This site uses some JS combined with CSS3 to accomplish these things. 
Take a look at the linked JS file.  They use this on the website you mentioned
http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js (The jQuery appear plugin which is also on Google Code)
combined with this css file
http://www.3magine.com/wp-content/themes/3magine/css/animations.css
to accomplish all this fanciness.  After all those have been linked they use the following code to implement it all on the page
if(Modernizr.csstransitions){               
                var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.src = "http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js";
                $('head').append( script );
                                document.write('<link rel="stylesheet" type="text/css" href="http://www.3magine.com/wp-content/themes/3magine/css/animations.css" />');
                $(function(){

                    //rewind all animations and remove classes when they appear
                    $('.sequential').appear({
                        once:true,
                        forEachVisible:function(i,e){   if(i==0)return; $(e).addClass('delay'+i); },
                        appear:function(){      $(this).removeClass('init').removeClass('disappear');   },
                        disappear:function(){   $(this).addClass('disappear');  }
                    });
                    $('.sequentialChildren > *').each(function(ic,e){
                        //if(i==0) return;  $(e).addClass('delay'+i);
                        $(e).appear({
                            once:true,
                            forEachVisible:function(i,e){   if(ic==0)   return; $(e).addClass('delay'+ic); },
                            appear:function(){      $(this).removeClass('init').removeClass('disappear');   },
                            disappear:function(){   $(this).addClass('disappear');  }
                        });
                    });
                });
            }

It's a lot of code to wade through, but it shouldn't be too hard to understand.  Also you'll notice at the top of the code block I posted, it starts with
if(!Modernizr.csstransitions)

Modernizr (http://modernizr.com/) is a HTML5/CSS3 feature browser detection JS library.  This site uses that library to ensure the user's browser is feature compliant with the code being written. 
Another popular CSS animations library is Animate.css
http://daneden.me/animate/
Check out all of these things and you should be off to a good start

