JSFiddle - React, Tailwind, and code Playground

by aparadise

HTML

<seciton class="aniwrap">
x
  <div class="mario">
  y
   <div class="arrow">
   <span></span>
</div>
  </div>
</seciton>

CSS

.aniwrap {
  border: 1px solid black;
  margin: 0 auto;
  overflow: hidden;
  min-width: 500px;
  min-height: 100px;
}

.mario {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  top: 15px;
  left: 50px;
  cursor: pointer;
}

.mario:hover {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  top: 15px;
  left: 50px;
  animation-name: drive; /*keyframe name*/
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite; /* 3 */
  animation-timing-function: ease; /* cubic-bezier.com */
}

@keyframes drive {
  from{ transform: translateY(-50px); opacity: 0;}
  to{transform: translateY(0); opacity: 1; }
  
  /*0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }*/
 
}

.arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.arrow span {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1s infinite;
}