Time Based CSS Bikin Website Berubah Sendiri Sesuai Jam

Bayangkan website yang otomatis menampilkan dark mode saat malam tiba, banner "Selamat Pagi" di jam 7 pagi, atau countdown flash sale yang berubah tampilan tanpa satu baris JavaScript pun.

Kedengarannya seperti sihir. Tapi ini nyata, dan CSS modern sedang bergerak ke arah sana.

CSS Bisa Baca Jam? Ini Bukan Sihir, Ini Fitur Baru

Selama bertahun-tahun, kalau developer mau website bereaksi terhadap waktu, jawabannya selalu JavaScript.

new Date().getHours() adalah andalan sejuta developer Indonesia untuk menentukan apakah harus tampil dark mode atau menampilkan pesan selamat datang yang kontekstual.

Tapi dunia CSS sedang berubah.

Ada beberapa pendekatan yang sedang berkembang dan mulai matang di ekosistem CSS modern, yang memungkinkan kita membuat elemen halaman merespons waktu secara langsung, atau setidaknya mendekati itu, dengan cara yang jauh lebih deklaratif dan ringan.

Yang paling menarik dibicarakan saat ini adalah kombinasi dari CSS Custom Properties, @property, @keyframes berbasis durasi panjang, dan diskusi aktif di komunitas CSS tentang env() time variables.

Ini bukan sekadar teori. Sebagian sudah bisa diimplementasi sekarang.

Cara Kerja Time-Based CSS: Sintaks dan Property yang Terlibat

Pendekatan 1: CSS Animation dengan Durasi Ekstrem

Trik paling elegan yang bisa kamu gunakan sekarang adalah memanfaatkan @keyframes dengan animation-duration yang sangat panjang, lalu menggunakan animation-delay negatif untuk "melompat" ke titik waktu yang tepat.

Konsepnya simpel: kalau satu hari = 86.400 detik, kamu bisa membuat animasi berdurasi 86.400 detik, lalu pakai animation-delay negatif berdasarkan waktu Unix modulo 86.400.

:root {
  --seconds-in-day: 86400;
  --current-second: 0; /* diisi via CSS custom property dari JS satu kali */
}

@property --time-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.day-night-bg {
  animation: dayNightCycle var(--seconds-in-day)s linear infinite;
  animation-delay: calc(-1 * var(--current-second) * 1s);
  animation-play-state: running;
}

@keyframes dayNightCycle {
  0%   { background: #0d1117; } /* tengah malam */
  25%  { background: #ff6b35; } /* subuh */
  35%  { background: #87CEEB; } /* pagi */
  60%  { background: #4a90e2; } /* siang */
  75%  { background: #ff8c42; } /* sore */
  85%  { background: #1a1a2e; } /* magrib */
  100% { background: #0d1117; } /* tengah malam lagi */
}

Perlu diperhatikan: kamu masih butuh satu baris JavaScript di awal untuk meng-inject --current-second. Tapi setelah itu, CSS yang bekerja sendiri sepenuhnya.

// Cukup dijalankan sekali saat halaman load
const now = new Date();
const secondsToday = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
document.documentElement.style.setProperty('--current-second', secondsToday);

Ini jauh lebih ringan daripada polling setInterval setiap detik.

Pendekatan 2: CSS @media dan Environment Variables (Proposal Aktif)

Di sinilah hal paling menarik terjadi.

Komunitas CSS, termasuk yang dibahas di CSS-Tricks dan thread CSSWG di GitHub, sedang mendiskusikan env() variables untuk waktu sistem.

Proposalnya termasuk sesuatu seperti:

/* PROPOSAL — belum tersedia di browser production */
@media (env(time) >= 06:00 and env(time) < 18:00) {
  body {
    color-scheme: light;
  }
}

@media (env(time) >= 18:00 or env(time) < 06:00) {
  body {
    color-scheme: dark;
  }
}

Kalau ini terealisasi, ini akan menjadi perubahan paradigma besar.

Browser tidak perlu lagi bergantung pada prefers-color-scheme yang hanya membaca preferensi sistem, melainkan langsung membaca jam perangkat pengguna.

Per Juli 2026, fitur ini masih dalam tahap proposal dan diskusi aktif di CSSWG. Belum ada browser yang mengimplementasinya secara native. Tapi tanda-tandanya positif dan momentum komunitasnya kuat.

Pendekatan 3: CSS Houdini + @property untuk Time-Aware Theming

Bagi browser yang sudah mendukung CSS Houdini (Chrome, Edge modern), kamu bisa membuat custom property yang beranimasi dan dikontrol penuh oleh CSS.

@property --hour-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.time-aware-element {
  --hour-progress: 0;
  animation: tickProgress 3600s linear infinite;
  animation-delay: calc(-1 * var(--current-minute) * 60s);
  opacity: calc(var(--hour-progress) / 100);
}

@keyframes tickProgress {
  from { --hour-progress: 0; }
  to   { --hour-progress: 100; }
}

Kombinasi @property dan @keyframes ini memungkinkan animasi nilai numerik yang sebelumnya tidak mungkin dilakukan di CSS murni.

Use Case Nyata: Dark Mode Otomatis, Greeting Banner, dan Promo Flash Sale

Dark Mode Berbasis Jam, Bukan Preferensi Sistem

Banyak pengguna di Indonesia yang tidak mengubah setting sistem mereka ke dark mode, padahal mereka browsing tengah malam.

Dengan pendekatan animasi durasi panjang, kamu bisa otomatis beralih ke dark mode mulai pukul 20.00 hingga 06.00:

.theme-wrapper {
  animation: autoTheme 86400s linear infinite;
  animation-delay: var(--time-offset);
}

@keyframes autoTheme {
  0%,   83.3%, 100% { /* 00:00 - 06:00, 20:00 - 24:00 */
    --bg: #1a1a2e;
    --text: #e0e0e0;
  }
  25%, 66.7% { /* 06:00 - 16:00, dengan transisi halus */
    --bg: #ffffff;
    --text: #1a1a2e;
  }
}

Greeting Banner yang Berubah Otomatis

Kamu bisa bikin hero section yang menampilkan teks berbeda berdasarkan waktu, sepenuhnya dikendalikan CSS:

.greeting-pagi,
.greeting-siang,
.greeting-malam {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Pagi: 06:00 - 11:00 (25% - 45.8% dari hari) */
.greeting-pagi {
  animation: showGreeting 86400s step-start infinite;
  animation-delay: calc(-1 * (var(--seconds-now) - 21600) * 1s);
}

@keyframes showGreeting {
  0%,   25%  { opacity: 0; }
  25.1%, 45.7% { opacity: 1; }
  45.8%, 100% { opacity: 0; }
}

Tentu saja konten teksnya tetap di HTML, tapi visibilitasnya dikontrol CSS berdasarkan waktu.

Promo Flash Sale dengan Visual Time-Aware

Bayangkan tombol CTA yang warna dan efeknya berubah saat jam flash sale dimulai, tanpa perlu JavaScript re-render:

.cta-button {
  background: #3b82f6;
  animation: flashSaleMode 86400s step-start infinite;
  animation-delay: var(--time-offset);
}

@keyframes flashSaleMode {
  /* Normal mode: sepanjang hari */
  0%, 100% {
    background: #3b82f6;
    box-shadow: none;
  }
  /* Flash sale 12:00 - 14:00 = 50% - 58.3% dari hari */
  50%, 58.2% {
    background: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    animation: pulse 1s infinite;
  }
}

Implementasi di Website Bisnis Indonesia: Jam Operasional dan Konten Dinamis

Indikator "Buka/Tutup" Otomatis untuk Toko dan Klinik

Ini salah satu use case paling praktis untuk bisnis lokal Indonesia.

Website klinik atau toko online bisa menampilkan badge "Sedang Buka" atau "Tutup" otomatis tanpa backend logic, hanya dengan CSS:

.status-badge {
  animation: operationalStatus 86400s step-start infinite;
  animation-delay: var(--time-offset);
}

/* Jam operasional: 08:00 - 17:00 */
@keyframes operationalStatus {
  0%, 33.3% {    /* 00:00 - 08:00 */
    --badge-color: #ef4444;
    --badge-text: "Tutup";
  }
  33.4%, 70.8% { /* 08:00 - 17:00 */
    --badge-color: #22c55e;
    --badge-text: "Buka";
  }
  70.9%, 100% {  /* 17:00 - 24:00 */
    --badge-color: #ef4444;
    --badge-text: "Tutup";
  }
}

.status-badge::before {
  content: var(--badge-text, "Cek Jadwal");
  background: var(--badge-color, #6b7280);
  /* styling */
}

Banner Konten Dinamis Berdasarkan Sesi Hari

Website berita atau portal edukasi bisa menampilkan konten yang relevan dengan sesi hari:

• Pagi: artikel motivasi dan berita terkini
• Siang: konten tutorial dan how-to
• Malam: konten ringan dan entertainment

Ini bisa dikendalikan via CSS class visibility yang dianimasi berdasarkan waktu.

Kesulitan dengan tugas programming atau butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas IT dan teknik informatika Anda. Dapatkan bantuan profesional di jasa tugas IT KerjaKode.

Header Warna Sesuai Waktu untuk Brand Experience

Salah satu detail kecil yang memberikan kesan "wow" ke pengunjung adalah header yang warnanya berubah halus sepanjang hari, seperti langit nyata.

header {
  animation: headerSkyColor 86400s linear infinite;
  animation-delay: var(--time-offset);
}

@keyframes headerSkyColor {
  0%     { background: hsl(240, 40%, 10%); }  /* midnight */
  16.7%  { background: hsl(25, 80%, 40%); }   /* dawn */
  25%    { background: hsl(200, 70%, 70%); }  /* morning */
  50%    { background: hsl(210, 60%, 55%); }  /* noon */
  70.8%  { background: hsl(30, 90%, 55%); }   /* dusk */
  79.2%  { background: hsl(260, 50%, 20%); }  /* evening */
  100%   { background: hsl(240, 40%, 10%); }  /* midnight */
}

Detail seperti ini hampir tidak pernah dilakukan di website Indonesia, dan itu peluang diferensiasi yang besar.

Batasan dan Fallback: Kapan JavaScript Masih Lebih Masuk Akal

Dengan semua kehebatan ini, penting untuk jujur tentang batasannya.

Keterbatasan Teknis yang Perlu Diketahui

Pertama, kamu masih butuh satu sentuhan JavaScript di awal untuk inject timestamp. Artinya "tanpa JavaScript" lebih tepat disebut "minimal JavaScript" — satu kali eksekusi, bukan polling terus-menerus.

Kedua, CSS tidak bisa membaca timezone pengguna secara otomatis. Kalau website kamu punya pengguna dari Makassar (WITA) dan Jakarta (WIB) sekaligus, JavaScript tetap dibutuhkan untuk kalkulasi offset timezone yang tepat.

Ketiga, step-start dalam keyframes berarti perubahan bersifat instan, bukan gradual, kecuali kamu menggunakan nilai linear dengan keyframe yang berdekatan untuk menciptakan transisi halus.

Keempat, perubahan tidak akan akurat ke detik jika pengguna membiarkan tab terbuka sangat lama tanpa reload. Untuk kasus seperti countdown timer yang harus presisi, JavaScript dengan setInterval tetap lebih reliable.

Kapan Pakai JavaScript?

Gunakan JavaScript kalau:

• Kamu butuh update real-time setiap detik (countdown timer, jam digital live)
• Logika waktu melibatkan kalkulasi timezone yang kompleks
• Konten yang berubah bukan hanya visual tapi juga data (fetching API berbeda berdasarkan jam)
• Kamu perlu persist state waktu di server (misalnya flash sale harus konsisten untuk semua pengguna)

Gunakan pendekatan time-based CSS kalau:

• Kamu ingin perubahan visual murni (warna, opacity, visibility)
• Performa adalah prioritas utama dan kamu ingin zero JavaScript untuk theming
• Konteks penggunaannya toleran terhadap akurasi "cukup dekat" bukan presisi detik
• Kamu membangun experience yang memorable dan unik di atas fondasi yang ringan

Aksesibilitas dan Prefers-Reduced-Motion

Satu hal yang wajib dipertimbangkan: animasi berbasis CSS yang berjalan terus-menerus bisa mengganggu pengguna dengan sensitivitas gerak.

Selalu sertakan:

@media (prefers-reduced-motion: reduce) {
  .time-aware-element {
    animation: none;
    /* fallback statis yang masuk akal */
    background: #1a1a2e; /* atau ambil nilai tengah */
  }
}

Ini bukan hanya soal aksesibilitas, tapi juga tentang performa baterai di mobile.

Masa Depan Time-Based CSS: Tunggu Apa Lagi?

Komunitas CSS sedang aktif mendiskusikan beberapa proposal yang relevan.

Salah satunya adalah @media (time-range: ...) yang akan memungkinkan conditional styling berdasarkan rentang waktu tanpa JavaScript sama sekali.

Ada juga diskusi tentang env(local-time) yang akan memberikan akses langsung ke waktu lokal perangkat pengguna dalam format yang bisa digunakan di kalkulasi CSS.

Kalau salah satu dari ini masuk ke spesifikasi resmi dan diimplementasi browser, cara kita membangun website akan berubah cukup signifikan, terutama untuk aplikasi yang berhubungan dengan jadwal, jam operasional, dan experience berbasis konteks waktu.

Developer Indonesia yang mulai bereksperimen dengan ini sekarang akan punya keunggulan besar ketika fitur-fitur tersebut matang.

Intinya: time-based CSS bukan sekadar trik keren. Ini adalah cara berpikir baru tentang bagaimana website bisa responsif terhadap konteks dunia nyata, bukan hanya viewport atau preferensi sistem.

Mulai dengan satu kali inject timestamp di awal, lalu biarkan CSS yang bekerja. Website kamu jadi lebih hidup, lebih ringan, dan lebih memorable — tanpa overhead JavaScript yang terus berjalan di background.