JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#" onclick="set()">start</a>
<div id="getset" class="get getset"></div>

CSS

.get {font-family:arial; width:300px;text-align:center;color:#000;}

.getset {  font-size:50px;  opacity: 1;}

.getset2 {  font-size:100px; opacity: 0; transition: font-size 0.5s, opacity 0.5s; transition-timing-function: linear; }

JavaScript

function set() {
setTimeout(function(){ready();},1500);
}
function ready() {
document.getElementById("getset").innerHTML = "3";
document.getElementById("getset").className = "get getset";
setTimeout(function(){getset();},20);
}
function getset() {
document.getElementById("getset").className = "get getset2";
setTimeout(function(){get2();},500);
}
function get2() {
document.getElementById("getset").className = "get getset";
document.getElementById("getset").innerHTML = "2";
setTimeout(function(){getset2();},20);
}
function getset2() {
document.getElementById("getset").className = "get getset2";
setTimeout(function(){get1();},500);
}
function get1() {
document.getElementById("getset").className = "get getset";
document.getElementById("getset").innerHTML = "1";
setTimeout(function(){getset1();},20);
}
function getset1() {
document.getElementById("getset").className = "get getset2";
}