Les animations CSS3 c’est super, mais la syntaxe est assez pénible et ce n’est pas évident à temporiser (une anim, puis une autre, et une 3ème au clic, etc).

Je vous propose donc d’utiliser la librairie Transit, qui simplifie la syntaxe et permet de s’occuper des animations côtés Javascript et non côté CSS.

http://ricostacruz.com/jquery.transit/

Pour l’activer/importer, c’est comme d’habitude :

• vous copiez le fichier dans le dossier js/ de votre projet
• dans le header il faudra cibler le bon chemin…

  <script type="text/javascript" src="js/jquery.transit.min.js"></script>

Ensuite vous pouvez l’utiliser dans votre bloc jQuery, que ce soit dès le démarrage de la page ou lors d’un survol, un clic, etc…

Il y a la possibilité de chainer les animations pour créer une file d’attente : une anim, puis une autre, etc.

$('header')
.transition({'x': '-300', 'y': '-600'}, 0) // instantané
.transition({'y':'0', 'opacity':'0.5', 'rotate':'450deg', 'scale':'0.5'}, 600) // en 0.6 sec
.delay(1000) // puis pause d'1 sec
.transition({'x':'0', 'opacity':'1', 'rotate':'0deg', 'scale':'1'}, 600, 'easeOutBack'); // puis en 0.6 sec

Alors le résultat peut être kitch, mais c’est plein de potentiel !

Les paramètres ‘x’ et ‘y’ de ce plugin offrent bien des avantages, car ça ne touche ni aux marges, ni aux paramètres CSS left et top (qui ne marchent qu’en absolute, relative ou fixed), là c’est une 3ème façon de placer un élément : les transformations CSS3 (translateX et translateY dans le cas présent).

Gros avantage : ça ne bouscule en rien le reste de la mise en page.

Quelques exemples d’utilisation :
http://www.studio-songes.fr/fr/
http://jaukia.github.io/zoomooz/