Animazione multipla con i css

[andrea-dindya]

Buonasera colleghi,

devo animare due elementi di un div con i css ma non so come fare. Qualcuno di voi se n'è mai occupato? Ho fatto dei test con un solo elemento con il tutorial di html.it
http://www.html.it/pag/19470/animazioni-css3/ ma non ho la più pallida idea di come animare ad esempio una scritta ed una immagine.
Diciamo che l'animazione dovrebbe avere una dissolvenza in entrata del testo, il testo rimane visibile e da questo momento appare gradatamente anche una immagine.
Il problema non è tanto il modo di animare, ma come devo fare ad animare due oggetti contemporaneamente come in questo caso? Ripeto: riesco ad animare solo un elemento per volta e non due insieme.
Come devo organizzare il codice css?

[webbeloz]

test eseguito è visibile on-line?

giusto per capire, cosa vorresti ottenere.

[andrea-dindya]

Il test ha lo stesso esito del tutorial, ma per capire l'effetto che voglio ottenere puoi vedere questo sito http://www.investigatoreprivatosardegna.it/
Certo: l'animazione non è di particolare effetto ma per ora sarebbe un successo replicarla così senza flash.

[andrea-dindya]

Ci sono riuscito, pensavo che fosse più complicato ed invece... metto il codice.

@-webkit-keyframes 'nome' {
0% {
 font-size:36px;
 color:#CCC;
/*-webkit-transform: scale(1.0) rotate(0deg);*/

}
12.5% {
 font-size:36px;
 color:#999;
}
25% {
 font-size:36px;
 color:#666;
}
37, 5% {
 font-size:36px;
 color:#000;
}
50% {
 font-size:36px;
 color:#000;
}
75% {
 font-size:36px;
 color:#000;
}
100% {
 font-size:36px;
 color:#000;
}
}
.nomebox {
	-webkit-animation-name: nome;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	width: 40%;
}
.nomebox h1 {
	font-size: 42px;
	margin: 60px 0 0 48px;
	border: 0;
	padding: 0;
}
@-webkit-keyframes 'logo' {
0% {
opacity: 0.0;
 -webkit-transform: scale(0.5)
}
33% {
opacity: 0.5;
 -webkit-transform: scale(0.5)
}
50% {
 opacity: 0.5;
 -webkit-transform: scale(1.0);
}
100% {
opacity: 1.0;
 -webkit-transform: scale(1.0);
}
}
.logo {
	width: 308px;
	height: 40px;
	margin-top: 20px;
	margin-left: 336px;
	position: relative;
	z-index: 5;
	letter-spacing: inherit;
	text-align: center;
	-webkit-animation-name: logo;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
}

<div class="nomebox">
      <h1>tuascritta</h1>
    </div>
    <div class="logo">[img]img/logo-blu-bianco.jpg[/img] 

      <span style="color:#0033CC">Sottotitolo</span> </div>
  </div>