(Disclaimer: I've tried in an entirely week-end to animate birds using only CSS3 but without great success... sorry about that).

1) animate the clouds (#clouds):

2) animate the hills (#hill2 & #hill1):
@-webkit-keyframes animHill2{
from {background-position: 0px 258px; }
to {background-position: -1110px 258px; }
}

@-webkit-keyframes animHill1{
0% {background-position: 0px 104px; }
100% {background-position: -2220px 104px; }
}

#hill2{
-webkit-animation: animHill2 25s linear 0s infinite;
}

#hill1 {
-webkit-animation: animHill1 25s linear 0s infinite;
}

You may not have noticed but I've tweeted about jQuery 1.4 new features. Here is my selection of the best jQuery 1.4 brand-new methods:

#jQuery 1.4 .delay( duration, [ queueName ] ) method seems very useful ! http://api.jquery.com/delay/

#jQuery 1.4 .toArray(); //helper
toArray: function() { return slice.call( this, 0 ); }
#jQuery 1.4 .prevUntil() .nextUntil() .parentsUntil() ROCKS! http://bit.ly/5DDcsv //A new way for traversing the DOM :)

#jQuery 1.4 jQuery.noop() ? I Don't get the point... http://api.jquery.com/jQuery.noop/
noop: function(){}
#jQuery 1.4 .isEmptyObject(obj) //helper
isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; }

Voici le diaporama de ma conférence "Découverte HTML5/CSS3" avec une introduction aux bonnes pratiques dans le développement web:


N'hésitez pas à commenter, mettre en favoris le diaporama sur la page slideshare.