JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<p>Hover Me - You are a pig!</p>

CSS

html,
body {
  width: 100vw;
  height: 100vh;
  font-family: monospace;
  padding: 20px;
  display: flex; 
  justify-content: center;
  align-items: center;
}

p:hover {
  animation-play-state: running;
}

p {
  position: relative;
  width: 26ch;
  color: #000;
  font-size: 48px;
  animation: typing 3s steps(15, end);
  animation-fill-mode: both;
  animation-play-state: paused;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;

  &::before {
    position: absolute;
    content: "";
    width: 4px;
    top: 0;
    bottom: 0;
    right: 0;
    animation: blink .8s infinite;
  }
}

@keyframes blink {

  0%,
  50% {
    border-right: 4px solid transparent;
  }

  50%,
  100% {
    border-right: 4px solid #000;
  }
}

@keyframes typing {
  from {
    width: 11ch;
  }

  to {
    width: 26ch;
  }
}

JavaScript

// https://www.cnblogs.com/coco1s/p/16304660.html