<h2>Transition</h2>
<div class="container transition">
  <div class="item">T</div>
</div>

<h2>Animation</h2>
<div class="container animation">
  <div class="item">A</div>
</div>

body {
  padding: 20px;
  background-color: #121212;
}
.item {
  grid-column: 1 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 3px 0 0 rgba(white, .3);
  &:hover {
    filter: brightness(130%);
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
  &::after {
    content: "";
    width: 10px;
    height: 50%;
    background: white;
    position: absolute;
    top: 16px;
    left: 16px;
    border-radius: 100px;
    opacity: .3;
  }
}
h2 {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
  color: #555;
}

$size: 80px;
$padding: 10px;
$border: 4px;
$horizontal-distance: $size * 4;
.container {
  margin-bottom: 30px;
  padding: $padding;
  border: $border solid #333;
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-sizing: border-box;
  transition: .2s;
  &:hover {
    border-color: #444;
    background-image: linear-gradient(90deg, #222, transparent);
  }
  &.transition:hover .item {
    background-color: tomato;
    transform: translateX($horizontal-distance);
  }
  &.animation {
    height: ($size * 2) + ($padding * 2) + ($border * 2);
    margin-bottom: 0;
    &:hover .item {
      animation-play-state: running;
    }
    .item {
      background-color: royalblue;
      animation: heropy 3s infinite both paused;
    }
  }
  .item {
    width: $size;
    height: $size;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: orange;
    font-size: ($size / 2);
    font-weight: bold;
    transition-duration: 2s;
    will-change: transform background;
  } 
}

@keyframes heropy {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate($horizontal-distance, 0);
  }
  50% {
    background-color: tomato;
    transform: translate($horizontal-distance, $size);
  }
  75% {
    transform: translate(0, $size);
  }
  100% {
    transform: translate(0, 0);
  }
}