JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div id="logo" class="lma">
    <a href="http://ourplace.studio" class="animsition-link">
        <span class="first">Our </span><span class="second">Place</span>
    </a>
</div>

CSS

.lma {
  transition: all ease .3s;
}

a {
  text-decoration:none;
  transition: all ease .3s;
}

.lma .first, .lma .second {
  transition: all ease .3s;
  transition-duration: 1s;
}

.lma .first {
  width: 11px;
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
}

.lma .second {
  left: -10px
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
}

.lma:hover .first, .lma:hover .second {
  transition: all ease .3s;
  width: auto;
  transition-duration: 1s;
}