CSS Only: Copywriter Typewriter Animation Tanpa JavaScript

Eksperimen animasi CSS Only : Copywriter menampilkan efek teks yang diketik otomatis seperti mesin tik (typewriter) lengkap dengan kursor berkedip tanpa satu baris kode JavaScript pun.

Kunci dari efek ini adalah pemanfaatan fungsi timing steps() yang mengubah transisi lebar kontainer secara diskret karakter per karakter, bukan secara kontinu, dipadukan dengan satuan ch untuk mencocokkan jumlah huruf.

Trik Implementasi Typewriter Murni CSS

Implementasi menggunakan white-space: nowrap dan overflow: hidden agar teks terungkap secara bertahap:

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-tech-blue, #00AFFF);
  width: 0;
  animation:
    typing 3.5s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 30ch; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--color-tech-blue, #00AFFF); }
}

Timestamp video

• 00:00 — Mulai demo efek teks berjalan typewriter

Format dan sumber

Short berdurasi 28 detik ini tidak memiliki chapter resmi di platform YouTube; penanda 00:00 menandai awal preview komponen. Demonstrasi kode dan repositori sumber ditautkan di deskripsi kreator: Demo interaktif csskit dan GitHub csskit-ab2rahman. Sumber video, diunggah 2026-08-07.