.show-words {
  background-color: #0070C9;
  padding: 10px;
  color: #0070C9;
  border-radius: 5px;
  transition: 200ms ease-in;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 75px;
  display: block;
  width: 100%;
}
@keyframes show-at-end {
  99% {
    color: #0070C9 ;
  }
  100% {
    color: #fff;
  }
}

.show-words:hover {
  animation: show-at-end 3s forwards;
}

@keyframes twirl {
  100% {
    transform: rotateZ(720deg) translate(-50%, -50%);
    left: 50%;
    top: 50%; 
  }
}

.show-words::before,
.show-words::after {
  content: attr(data-content);
  position: absolute;
  color: white;
}
  
.show-words::before {
  top: -50%;
  left: -50%;
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.show-words::after {
  top: 150%;
  left: 150%;
  transform: rotateZ(60deg) translate(5em, -7.5em);
}

.show-words:hover::after,
.show-words:focus::after,
.show-words:focus::before,
.show-words:hover::before {
  animation: twirl 3s forwards;
}