Как плавно вернуть элемент в прежнее состояние с использованием 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')
});

Ответы (0 шт):