JSFiddle - React, Tailwind, and code Playground

by agentemi1y

HTML

<div class="box"></div>

CSS

.box {
    width: 10rem;
    height: 10rem;
    position: absolute;
    background-color:purple;
    -webkit-animation: moveResult 1.3s;
}

@-webkit-keyframes moveResult {
    0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
  }
}