JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div class="square" tabindex="0">
  <div class="container">
    <p></p>
  </div>
</div>

CSS

.square {
  height: 40px;
  width: 40px;
  background-color: blue;
  transition: left 0.5s;
  position: absolute;
  left: 0;
  animation: focus-in-fade 0.5s;
}

p {
  position: absolute;
  margin: 0;
  height: 150px;
  width: 20px;
  background-color: red;
  z-index: -1;
}

/* div:focus,
div:focus * {
  animation: fade2 1s;
  animation-direction: alternate;
} */

div:focus {
  animation: focus-out-fade 0.5s;
  left: 100px;
}

@keyframes fade {
  50% {
    color: transparent;
    background-color: transparent;
  }
}

@keyframes focus-in-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes focus-out-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}