JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
    <img src="https://scontent.ftbs1-1.fna.fbcdn.net/v/t1.0-9/p960x960/80585397_2840226859350494_4669787597273300992_o.jpg?_nc_cat=108&_nc_ohc=0018mkidze4AQmkM07j9H6qiqxpfAQPNsurTSyhKgiZxUvRvHZYELA89A&_nc_ht=scontent.ftbs1-1.fna&oh=1dfa9c899f99e38aea36e3e8d35b4b26&oe=5EA1500C" alt="">
</div>
<div class="a">
    <img src="https://scontent.ftbs1-1.fna.fbcdn.net/v/t1.0-9/p960x960/80585397_2840226859350494_4669787597273300992_o.jpg?_nc_cat=108&_nc_ohc=0018mkidze4AQmkM07j9H6qiqxpfAQPNsurTSyhKgiZxUvRvHZYELA89A&_nc_ht=scontent.ftbs1-1.fna&oh=1dfa9c899f99e38aea36e3e8d35b4b26&oe=5EA1500C" alt="">
</div>

CSS

div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    top: 300px;
    left: 50px;
    animation: a linear 5s both;
}
div.a {
    animation-delay: 1s;
}
div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes a {
    12.5% {
        transform: translate(200px,-20px) scale(1.2);
    }
    25% {
        transform: translate(400px,-40px) scale(1);
    }
    37.5% {
        transform: translate(200px,-60px) scale(0.8);
    }
    50% {
        transform: translate(0px,-80px) scale(1);
    }
    62.5% {
        transform: translate(200px,-100px) scale(1.2);
    }
    75% {
        transform: translate(400px,-120px) scale(1);
    }
    87.5% {
        transform: translate(200px,-140px) scale(0.8); 
    }
    100% {
        transform: translate(0px,-160px) scale(1);
    }
}