Figer une animation css

Bonjour,
j'ai créé une animation css qui consiste en une galerrie de 4 images en espèce de cube qui tourne sur lui même.
Je l'utilise comme "slidershow" en page d'accueil mais e souci que j'ai c'est que j voudrais qu'il se fige quand il y a hover dessus.
Je ne veux pas qu'il s'arrete et puis qu'il se réinitialise mais bien qu'il se fige.
Je n'ai pas un morceau de script JS sur cette gallerie mais j'ai le sentiment que je dois passer par un petit code jQuery pour faire cela.

je ne demande pas une solution, mais plutôt un éclairage quand à la méthode et au selecteur que je dois viser pour ce faire

je vou spose le code html et le css

<[/contents/242-introduction-au-dynamic-html-dhtml div] id="theWrapper">
		<div id="walls">
			<div class="image i1"><img width="400"src="http://www.nympheae.fr/Files/104203/Img/09/shunga.png"></div>
			<div class="image i2"><img width="400" src="http://www.nympheae.fr/Files/104203/Img/22/lelo.png"></div>
			<div class="image i3"><img width="400" src="http://www.nympheae.fr/Files/104203/Img/09/shunga.png"></div>
			<div class="image i4"><img width="400" src="http://www.nympheae.fr/Files/104203/Img/22/lelo.png"></div>
			<div class="bottom"></div>
		</div>
		
	</div>

body{background: #000}
img{opacity:.85}
h1{color: #fff; text-align: center}
.image{width:400px;height:200px; position: absolute;background: rgba(0,0,0 ,.93); color:#fff;text-align: center;font-size: 13px}

#theWrapper{ width:600px;
	-o-perspective: 700; 
	-moz-perspective: 700;
	-webkit-perspective: 700;
	perspective: 700;
	background:#000;
	position:absolute;
	left:50%;
	margin-left:-300px;
	top:300px;}
	/*li wrapper parameters*/
	#walls{width:400px;
		height:200px;
		margin: 0 auto;
		-ms-transform-style:preserve-3d;
		-webkit-transform-style:preserve-3d;
                -moz-transform-style:preserve-3d;
                -o-transform-style:preserve-3d;
		transform-style:preserve-3d;
		-ms-animation:Carrousel 20s infinite linear reverse;
		-webkit-animation:Carrousel 20s infinite linear reverse;
                -moz-animation:Carrousel 20s infinite linear reverse;
                -o-animation:Carrousel 20s infinite linear reverse;
                 animation:Carrousel 20s infinite linear reverse;

/* let's transform faces of the gallery */
	}
	#walls > .i1{
                background-size:cover;
                opacity:.93;
               -ms-transform:translateZ(200px);
		-webkit-transform:translateZ(200px);
                -moz-transform:translateZ(200px);
                -o-transform:translateZ(200px);
		transform:translateZ(200px);
	}
	#walls > .i2{
                 background-size:cover;
                 opacity:.93;
                 -ms-transform:rotateY(90deg) translateZ(200px);
		-webkit-transform:rotateY(90deg) translateZ(200px);
                -moz-transform:rotateY(90deg) translateZ(200px);
                -o-transform:rotateY(90deg) translateZ(200px);
		transform:rotateY(90deg) translateZ(200px);
	}
	#walls > .i3{
                 background-size:cover;
                 opacity:.93;
                 -ms-transform:rotateY(180deg) translateZ(200px);
		-webkit-transform:rotateY(180deg) translateZ(200px);
                -moz-transform:rotateY(180deg) translateZ(200px);
                -o-transform:rotateY(180deg) translateZ(200px);
		transform:rotateY(180deg) translateZ(200px) ;;
	}
	#walls > .i4{
                 background-size:cover;
                 opacity:.93;
                 -ms-transform:rotateY(270deg) translateZ(200px);
		-webkit-transform:rotateY(270deg) translateZ(200px);
                -moz-transform:rotateY(270deg) translateZ(200px);
                -o-transform:rotateY(270deg) translateZ(200px);
		transform:rotateY(270deg) translateZ(200px);
		}

@-ms-keyframes Carrousel{
	0%{-ms-transform:rotateY(0)}
	100%{-ms-transform:rotateY(360deg);}
}
@-webkit-keyframes Carrousel{
	from {-webkit-transform:rotateY(0);}
	to {-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes Carrousel{
	from {-moz-transform:rotateY(0)}
	to {-moz-transform:rotateY(360deg);}
}
@-o-keyframes Carrousel{
	from {-o-transform:rotateY(0)}
	to {-o-transform:rotateY(360deg);}
}
@keyframes Carrousel{
	from {transform:rotateY(0)}
	to {transform:rotateY(360deg);}
}

et voici le jQuery que j'ai tenté sans succès

$(document).ready(function(){
		$('.image').hover(function(){
			$('#walls').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});},function(){
				$('#walls').css('-webkit-animation-play-state':'running','animation-play-state':'running');
			})
		});

merci par avance pour votre aide