Есть кнопка и объект. Стоит задача сделать так чтобы при подводе на кнопку объект начал двигаться благодаря 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");
});
});
Спасибо.
