JSFiddle - React, Tailwind, and code Playground

by _nderscore

HTML

<a class="thingy">
  <span class="arrow"></span>
</a>

SCSS

body { background: #000; color #FFF; }

.thingy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  &:before {
    display: inline-block;
    content: "";
    width: 50px;
    height: 50px;
    border: 1px dashed #FFF;
    border-radius: 50%;
  }
  
  .arrow {
    &:before {
      display: inline-block;
      content: "";
      width: 1px;
      height: 75px;
      background: #AAA;
      position: absolute;
      top: 25px;
      left: 25px;
    }
  
    &:after {
      display: inline-block;
      content: "";
      border-bottom: 1px solid #AAA;
      border-right: 1px solid #AAA;
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      position: absolute;
      top: 87.5px;
      left: 19.5px;
    }
  }
  
  &:hover {
 
    &:before {
      animation: spinnah 5s linear infinite;
    }
    .arrow {
      animation: bumpin 5s ease-in-out infinite;
    }
  }
}

@keyframes "spinnah" {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes "bumpin" {
  0%, 100% {
    transform: translateY(0);
  } 
  50% {
    transform: translateY(25px);
  }
}