JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Oh yeah, we countin'</h1>
<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>

CSS

.counter {
    width:100px;
    height:100px;
    background:#ccc;
    overflow:hidden;
}
.numbers{
    width:auto;
    white-space:nowrap;
    -webkit-animation: countNumber 0.5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function: steps(10);
}
.numbers div {
    float:left;
    text-align:center;
    width:100px;
    height:100px;
    line-height:100px;
    display:inline-block;
}

@-webkit-keyframes countNumber {
    0% {
        margin-left:0px
    }
    100% {
        margin-left:-1000px
    }
}