JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="container">
  <div class="trophy">
    <div class="stars star1">
    1
    </div>
    <div class="stars star2">
    2
    </div>
    <div class="stars star3">
    3
    </div>
    <div class="stars star4">
    4
    </div>
    <div class="stars star5">
    5
    </div>
  </div>
</div>

CSS

.container {
  width: 500px;
  height: 500px;
  position: relative;
  border: 1px solid black;
}

.trophy {
  left: calc(50% - 52px);
  border: 1px solid blue;
  position: absolute;
  width: 104px;
  height: 152px;
  animation: trophymove .25s ease-out forwards;
}

@keyframes trophymove {
    0%   {bottom: 0; opacity: 0;}
    75%  {bottom: 200px; opacity: 1;}
    100% {bottom: 190px;}
}

@keyframes star1move {
    80%  {transform: translate(0, 0)}
    100% {transform: translate(-130px, -60px) rotate(-45deg);}
}

@keyframes star2move {
    80%  {transform: translate(0, 0)}
    100% {transform: translate(-100px, -120px)}
}

@keyframes star3move {
    80%  {transform: translate(0, 0)}
    100% {transform: translate(-30px, -150px)}
}

@keyframes star4move {
    80%  {transform: translate(0, 0)}
    100% {transform: translate(40px, -140px)}
}

@keyframes star5move {
    80%  {transform: translate(0, 0)}
    100% {transform: translate(100px, -110px)}
}

.stars {
  left: 42px;
  top: 66px;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
}

.star1 {
  animation: star1move .3s ease-out forwards;
}

.star2 {
  animation: star2move .4s ease-out forwards;
}

.star3 {
  animation: star3move .5s ease-out forwards;
}

.star4 {
  animation: star4move .6s ease-out forwards;
}

.star5 {
  animation: star5move .7s ease-out forwards;
}