Du kannst die Animation auch auf Klicken auslösen. Dazu fügst du einem Element einen click-Handler hinzu, der beim einzublendenden Element eine Klasse setzt. Diese Klasse bekommt die CSS-Eigenschaft animation: …;, womit die Animation startet. Dann muss man aber dafür sorgen, dass in Browsern, die Animationen nicht unterstützen, die Inhalte gar nicht erst ausgeblendet werden.
Ich habe das mal beispielhaft umgesetzt:
http://jsfiddle.net/molily/unuHb/
Da diese Funktionalität einfacher ist, braucht es keine CSS-Keyframe-Animationen, sondern eine CSS-Transition (transition: opacity 1s;
) reicht aus.
Über Feedback und Verbesserungsvorschläge würde ich mich freuen.
Mathias