<div class="counter">
  <div class="numbers">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>
.counter {
  width: 100px;
  font: 800 40px system-ui;
  overflow: hidden;
}
.numbers {
  width: auto;
  display: flex;
  animation: countNumber 4s infinite alternate;
  animation-timing-function: steps(10);
}
.numbers div {
  text-align: center;
  flex: 0 0 100px;
}

@keyframes countNumber {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -1000px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.