Плавное возвращение анимации @keyframes

Недавно столкнулся с проблемой , плавности возвращения анимации "keyframes" , а именно свойства transform. Вроде как удалось решить данную проблему ,но когда попробовал на телефоне плавной анимации возвращения не было. Так же когда залил на codePen анимация перестала плавно возвращаться даже на ПК.

Очень интересно как правильно решить эту проблему возможно даже сделать подобную анимацию вовсе без "keyframes". Делаю так

let isAnimated = false;
function Rotater(){
    if(!$(this).parent().hasClass('clicked') && $(this).parent().hasClass('anim_active')){
        let $animElem = $(this.parentNode);
        let transformValue = $animElem.css('webkitTransform') || $animElem.css('transform');
        $(this).parent().addClass('clicked').removeClass('anim_active');
        $animElem.css({     'webkitTransform': transformValue,
                            'transform': transformValue}).removeClass('anim_active');
        requestAnimationFrame(function(){
            $animElem.css({  'webkitTransform': 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
                            'transform': 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'});
        })
        setTimeout(function(){
            isAnimated = true;
        },600)

    } 
}
$(document).ready(function(){
    $('#boxer3d .ground').on('click', Rotater);
})

https://codepen.io/vadimmbld/pen/YzqYKGX