Salve, non riesco a capire che comando devo usare, vi posto un esempio ch ho trovato su internet, perchè prima di sviluppare qualcosa di mio devo capire il funzionamento preciso della sintassi:
codice:
<style type="text/css">
.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 5s;
	-webkit-animation-duration: 5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(0%);
	}
	65%{
		transform: translateY(0%);
	}
	80%{
		transform: translateY(0%);
	}
	95%{
		transform: translateY(0%);
	}			
	100% {
		transform: translateY(0%);
	}		
}
</style>
Questa sintassi fà in modo che l'oggetto che compare scorra dall'alto verso il basso (si presenta con un -100% fino a raggingere 0%).
Ho visto che nell'esempio è specificato che l'oggetto debba muoversi anche dall'alto verso il basso, ovvero sull'asse Y, quello che invece vorrei fare io è: far uscire l'oggetto direttamente a 0%(quindi direttamente nella posizione finale), però far visualizzare solo il 10% di esso, e nel giro di 1 secondo rivelare il resto dell'oggetto.
In pratica vorrei scoprire l'oggetto nel giro di 1 secondo, però gradualmente.
Quale effetto css si adatta allo scopo? Avevo pensato a qualcosa del tipo:"moz-linear-transition" o simili, ma riesco a farlo funzionare.