Fade out a fade in v css

Ahoj,

chtěl bych animovat display: none a display: block přes css. Vím, že to nejde, ale určitě to nějakou kličkou jde. Pomocí pozicování, opacity, transition, či key frames apod. Ale ani za boha se mi to nedaří. Máte někdo nápad, jak docílit animace (fade out, fade in) jen skrze css?

Díky moc :-)

Asi jsem se nyvjadril dost jasne. Chtel, bych aby se to animovalo na click a fungovalo to jako fade in, fade out.

ukazka: jsfiddle.net/VV2ek/3624 - edit: 9:16 - spatnej odkaz

Sice to faduje, ale vzdy, kdyz prvek zmizi, tak to jde skokove, chtel bych to plynule. Kliknu, behem pul vteriny postupne zmizi.. a hned na to se behem dalsi pul vteriny plynule zobrazi.

Tento pripad je jenom ukazkovej, samozrejme to je cely spatne, opacity ani display:block/none muj problem samozrejme neresi. Vlastne rad bych neco takoveho, co je tady dole na strance jako ukazka: api.jquery.com/fadetoggle

Tak jsem si s tím hrál, zkoušel všechny možný různý způsoby a nenapadá mě způsob, jakým to udělat bez použití jQuery.

Hrál jsem si s tímto příkladem, který mám nachystaný: jsfiddle.net/c27ss207. V reálu by to mělo vypadat potom tak, že kliknu na rámeček, nadpis mi plynule zmizí a jakmile zmizí, tak se mi plynule objeví obsah.

Dospěl jsem k názoru, že to vyřešit pouze přes CSS nelze. Jediný způsob, jak by to šlo udělat je změnit HTML markup a boxy, které chci schovávat, či odkrývat, bych musel absolutně napozicovat a ty pak animovat přes opacity. Problém by pak nastal v případě, že by v již zmiňovaných boxech byl dinamický obsah a za němi byl další obsah, popřípadě bych řešil fluidní responziv a výška by se mi různě měnila...