Css animation

Bonjour,

J'ai une liste qui contient des images, et j'affiche que la première de la liste dans un block en créant une petite animation (donc tous les autres <li> sont cachés). En cherchant un peu, j'ai fait en css ceci:

#sliderDiv ul#sliderUL li{
	animation-duration: 1s;
	-moz-animation-duration:1s; /* Firefox */
	-webkit-animation-duration:1s; /* Safari and Chrome */
	-o-animation-duration:1s; /* Opera */


	animation-name: slidein;	
	animation-name:slidein;
	-moz-animation-name:slidein; /* Firefox */
	-webkit-animation-name:slidein; /* Safari and Chrome */
	-o-animation-name:slidein; /* Opera */

}

@keyframes slidein {
  from {top:0px; left:0px;}
  to {top:0px; left:450px;}
}

@-moz-keyframes slidein /* Firefox */
{
  from {top:0px; left:-400px;}
  to {top:0px; left:0px;}
}


@-webkit-keyframes slidein /* Safari and Chrome */
{
  from {top:0px; left:-400px;}
  to {top:0px; left:0px;}
}

@-o-keyframes slidein /* Opera */
{
  from {top:0px; left:-400px;}
  to {top:0px; left:0px;}
} 

L'animation fonction pour le premier <li>. Quand je click sur un lien j'aimerais que le prochain qui s'affiche dans le block utilise l'animation, je ne vois pas comment faire, avez vous des suggestions ?

Merci,