JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="num" id="n1">123456</div>
<div class="num" id="n2">123456</div>
<div class="num" id="n3">123456</div>
<div class="num" id="n4">123456</div>
<div class="num" id="n5">123456</div>
<div class="num" id="n6">123456</div>

<a href="#" onClick="bbb()">Click</a>

CSS

.num {height:30px;line-height:30px; font-family:arial; font-size:1px; opacity:0;}

.num2 {height:30px;line-height:30px;font-family:arial;font-size:16px;opacity:1;
-webkit-transition: font-size 0.2s; /* For Safari 3.1 to 6.0 */
 transition: font-size 0.2s;}

JavaScript

function bbb(){

n1.className = "num";
setTimeout(function(){ n1.className = "num2"; }, 50);

setTimeout(function(){ n2.className = "num"; }, 150);
setTimeout(function(){ n2.className = "num2"; }, 200);

setTimeout(function(){ n3.className = "num"; }, 250);
setTimeout(function(){ n3.className = "num2"; }, 350);

setTimeout(function(){ n4.className = "num"; }, 400);
setTimeout(function(){ n4.className = "num2"; }, 450);

setTimeout(function(){ n5.className = "num"; }, 500);
setTimeout(function(){ n5.className = "num2"; }, 550);

setTimeout(function(){ n6.className = "num"; }, 600);
setTimeout(function(){ n6.className = "num2"; }, 650);


}