Как плавно вернуть элемент в прежнее состояние с использованием jquery
Использовал обычную анимацию в css, срабатывающую при наведении на элемент. Наведение контролировал через .hover() и .toggleClass() в jq. Если вывожу курсор с блока то классы пропадают и элемент резко возвращается в исходное положение. Он при анимации от 0% до 100% и так возвращается в исходное положение. Как сделать так, чтобы анимация при выведении курсора с блока доигрывалась до конца и больше не проигрывалась? Или как сделать не полную анимацию, а просто плавное возвращение элемента на свое место
HTML
<div class="col-6 anim2">
<img src="img/animations/scr1.png" class="scr1">
<img src="img/animations/scrx.png" class="scrx">
<img src="img/animations/scr2.png" class="scr2">
</div>
CSS
.scr1, .scr2, .scrx{
position: relative;
}
.scr1{
top: 404px;
z-index: 10;
transform: scale(1.1);
}
.scr2{
z-index: 12;
top: -160px;
left: 87px;
transform: scale(0.95);
}
.scrx{
z-index: 11;
top: 50px;
transform: scale(0.9) rotate(-33deg);
}
.scr1_anim{
animation-name: scr1_anim;
}
.scr2_anim{
animation-name: scr2_anim;
}
.scrx_anim{
animation-name: scrx_anim;
}
.anim_sets{
animation-duration: 6s;
animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
@keyframes scr1_anim{
50%{
transform: scale(0.95);
transition: 3s;
}
100%{
transform: scale(1.1);
transition: 3s;
}
}
@keyframes scr2_anim{
50%{
transform: scale(1.05);
transition: 3s;
}
100%{
transform: scale(0.95);
transition: 3s;
}
}
@keyframes scrx_anim{
50%{
transform: scale(1.05) rotate(0deg);
transition: 3s;
}
100%{
transform: scale(0.9) rotate(-33deg);
transition: 3s;
}
}
JS
$('.anim2').hover(function(){
$('.scr1').toggleClass('scr1_anim anim_sets')
$('.scr2').toggleClass('scr2_anim anim_sets')
$('.scrx').toggleClass('scrx_anim anim_sets')
});