Контроль webkit анимации через jQuery (вопрос)
 

Есть кнопка и объект. Стоит задача сделать так чтобы при подводе на кнопку объект начал двигаться благодаря webkit анимации и остановился в конце своего движения. После убирания мышки с кнопки, объект нужно вернуть в первоначальное состояние с той же анимацией, только в обратном порядке.



Задача состоит именно в этом, я не могу использовать анимацию js. К тому же я не могу контролировать webkit анимацию на чистом css, так как у меня группа объектов которых нужно анимировать подводя мышку к определенным объектам, я просто упростил схему чтобы было проще.

При подводе мышки я задаю класс с анимацией объекту:

@-webkit-keyframes floatCenter{
	0%{	
	}
	100%{
	margin-top: -25px;
	-webkit-transform:rotateZ(-5deg);
	}
}

.box-inside-left-anim {
    -webkit-animation-name: floatCenter;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}

При выводе мышки с кнопки я задаю объекту новый класс, в котором анимация крутится в обратном направлении:

@-webkit-keyframes floatCenterStop{
	0%{	
	margin-top: -25px;
	-webkit-transform:rotateZ(-5deg);
	}
	100%{
	margin-top: 0px;
	-webkit-transform:rotateZ(0deg);
	}
}

.box-inside-left-stop {
    -webkit-animation-name: floatCenterStop;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}

И тут я застреваю, так как класс у объекта теперь .box-inside-left-stop то при повторном подводе мышкой он уже не реагирует и не анимируется. Потому что изначально класс был .box-inside-right, после подвода стал .box-inside-right-amin, а после увода мышки стал .box-inside-right-stop. И я не понимаю как мне вернуть его в первоначальное состояние. Подскажите пожалуйста, задача не сложная, просто из-за моего небольшого опыта я не могу придумать верного подхода.

Вот jQuery код:

<script type="text/javascript">
	$(document).ready(function(){
	$(".box-inside-main").mouseover(function(){
		$(".box-inside-right").addClass("box-inside-right-anim");
	});
	
	$(".box-inside-main").mouseout(function(){
		$(".box-inside-right-anim").addClass("box-inside-right-stop");
	});
});

Спасибо.

webkit анимация - это критично? можно попробовать реализовать это через спрайты... тогда эта анимация будет кроссбраузерной...