JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<div></div>

CSS

body {
  background: ivory;
  font-weight: bold;
  font-size: 10em;
}
div {
  position: relative;
  border: 1px solid red;
  width: 1em;
  height: 1em;
  margin: 0.2em auto;
}
div::before {
  content: "0123456789";
  display: inline-block;
  width: 0.5em;
  overflow: hidden;
  animation: timing 100s infinite step-end;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
div::after {
  content: "0123456789";
  display: inline-block;
  width: 0.5em;
  overflow: hidden;
  animation: timing 10s infinite step-end;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
@keyframes timing {
  10% { text-indent: -0.5em;}
  20% { text-indent: -1em;}
  30% { text-indent: -1.5em;}
  40% { text-indent: -2em;}
  50% { text-indent: -2.5em;}
  60% { text-indent: -3em;}
  70% { text-indent: -3.5em;}
  80% { text-indent: -4em;}
  90% { text-indent: -4.5em;}
}