CSS ile geri sayım ( Sayaç – Counter ) yapmak, JavaScript kullanmadan basit ve zarif bir yöntemdir. Bu yöntem, animasyonlar ve @keyframes kuralı ile zamanın geriye doğru akmasını sağlayarak görsel bir geri sayım oluşturur.

Sayaç konusunda küçük bir örnek hazırladım. Örneği şuradan inceleyebilirisiniz. CSS Counter (codepen.io)

Gerekli kodları aşağıda paylaşıyorum.

CSS

body::after{
    content: counter(_MyCounter);
    font-size: 28em;
    color:white;
}

@keyframes countdown {
    20%{
        counter-increment: _MyCounter -1;
    }
    40%{
        counter-increment: _MyCounter -2;
    }
    60%{
        counter-increment: _MyCounter -3;
    }
    80%{
        counter-increment: _MyCounter -4;
    }
    100%{
        counter-increment: _MyCounter -5;
    }
}