JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footy">
<img id="kick" class="object footy float" src="http://placekitten.com/100/100">
</div>
    
    
    <button id='droppunt'>Drop Punt</button>    <button id='float'>kick</button>

CSS

button{
   position: relative;
    top: 300px;
}
.footy {
    z-index: 1999;
    width: 150px;
    height: auto;
}

.drop-punt {
    -webkit-transform: translate(360px, 360px) rotate(-360deg);
    -o-transform: translate(360px, 360px) rotate(-360deg);
    -moz-transform: translate(360px, 360px) rotate(-360deg);
    transform: translate(360px, 360px) rotate(-360deg);
}

.object {
    position: absolute;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
    transition: all 2s ease-in-out;
}

.drop-punt {
    -webkit-transform: translate(360px, 360px) rotate(-360deg);
    -o-transform: translate(360px, 360px) rotate(-360deg);
    -moz-transform: translate(360px, 360px) rotate(-360deg);
    transform: translate(360px, 360px) rotate(-360deg);
}

.float {
    -webkit-animation: floating 2s infinite linear;
    -moz-animation: floating 2s infinite linear;
    -ms-animation: floating 2s infinite linear;
    -o-animation: floating 2s infinite linear;
    animation: floating 2s infinite linear;
}

@-webkit-keyframes floating{
    0% { -webkit-transform: translate(0px, -10px); }
    50% { -webkit-transform: translate(0px, 10px); }
    100% { -webkit-transform: translate(0px, -10px); }    
}

@-moz-keyframes floating{
    0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
    50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
    100% { -moz-transform: translate(0px, -10px) rotate(0deg); }    
}

JavaScript

(function ($) {

    $('#droppunt').on('click', function() {
        $('#kick').removeClass('float').addClass('drop-punt');
    });

    $('#float').on('click', function() {
        $('#kick').addClass('float').removeClass('drop-punt');
    });


})(jQuery);