Lewati ke konten utama
JasaWebsite
Konfigurasi
Showcase Desain • 16 Pure CSS Motion Catalog

Katalog Animasi CSS Murni (Zero JS Bloat)

Seluruh 16 animasi ini dibangun murni menggunakan akselerasi perangkat keras CSS3 (GPU Compositor) tanpa bergantung pada library JavaScript berat. Bobot total di bawah 15KB dan mematuhi aturan aksesibilitas prefers-reduced-motion.

60-120 FPS<15KB BundleZero CLS (0.00)
Filter Kategori:

1. Fade Up Entrance

Entrance

Elemen bergeser naik halus 20px sambil memudar transparan ke nyata (0% ke 100% opacity).

STAGE: FADE-UP
Fade Up Entrance
60 FPS
GPU Compositor • 60 FPS • 0.6s Cubic Bezier
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

2. Scale In Pop

Entrance

Elemen membesar halus dari 95% ke 100% ukuran normal dengan transisi elastis modern.

STAGE: SCALE-IN
Scale In Pop
60 FPS
GPU Scale • Zero Reflow • 0.5s Ease-Out
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

3. Continuous Float (Floating Badge)

Continuous

Efek melayang lembut naik-turun 8px tanpa interupsi untuk elemen kartu atau lencana garansi.

STAGE: FLOAT
Continuous Float (Floating Badge)
60 FPS
Infinite Loop • Smooth 4s Ease-in-out
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

4. Pulse Ring Radar (WhatsApp Trigger)

Micro

Gelombang denyut radar melingkar ganda untuk menarik perhatian mata ke tombol WhatsApp mengambang.

STAGE: PULSE-RING
WA
60 FPS
Radar Echo • Opacity Scale Mask • 2s Loop
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0; }
}

5. Skeleton Shimmer Loading (Ghost UI)

Feedback

Efek kilau cahaya diagonal yang berjalan di atas placeholder sebelum data gambar dimuat.

STAGE: SHIMMER
60 FPS
Linear Gradient Shift • 2s Infinite
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

6. Infinite Horizontal Marquee Ticker

Continuous

Aliran logo klien dan mitra bisnis yang bergulir horizontal mulus tanpa jeda patah.

STAGE: MARQUEE
✦ Google Partner✦ Cloudflare Enterprise✦ ISO 27001 Certified✦ Next.js 16 Ready✦ Google Partner✦ Cloudflare Enterprise
60 FPS
CSS Flex Stream • Auto-Pause on Hover
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

7. Subtle Glow Breathe (CTA Focus)

Micro

Denyut aura cahaya radial biru yang berhembus lembut di sekeliling tombol konversi utama.

STAGE: GLOW-BREATHE
Subtle Glow Breathe (CTA Focus)
60 FPS
Box Shadow Blur • 3s Breathing Loop
@keyframes glowBreathe {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.25); }
  50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.65); }
}

8. Slide In Left Drawer

Entrance

Transisi masuk dari sisi kiri 30px untuk navigasi mobile drawer atau bilah filter produk.

STAGE: SLIDE-IN-LEFT
Slide In Left Drawer
60 FPS
X-Axis Translate • 0.5s Cubic Bezier
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

9. Bounce Subtle (Scroll Indicator)

Micro

Pantulan halus naik-turun 8px untuk memandu pengguna menggulir ke seksi berikutnya.

STAGE: BOUNCE-SUBTLE
Bounce Subtle (Scroll Indicator)
60 FPS
Subtle Y Bounce • 2s Continuous
@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

10. Flip Card 3D Entrance

Entrance

Efek rotasi perspektif 3D yang elegan saat kartu portofolio atau sertifikasi muncul.

STAGE: FLIP-3D
Flip Card 3D Entrance
60 FPS
CSS 3D Perspective • 0.6s Smooth Settle
@keyframes flip3d {
  from { opacity: 0; transform: perspective(600px) rotateX(30deg); }
  to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

12. Slow Cogwheel Spin (Automation)

Continuous

Putaran lambat 360 derajat konstan untuk roda gigi industri atau badge penghargaan berputar.

STAGE: SPIN-SLOW
Slow Cogwheel Spin (Automation)
60 FPS
Linear Rotation • 12s Per Revolution
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

13. Toast Notification Pop-Up

Feedback

Munculnya notifikasi toast konfirmasi dari tepi bawah layar dengan pelambatan kinetik.

STAGE: TOAST-SLIDE
Toast Notification Pop-Up
60 FPS
Kinetics Slide • 0.4s Damped Spring
@keyframes toastSlide {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

14. Delayed Floating Layer

Continuous

Variasi melayang beramplitudo 12px dengan offset waktu untuk menciptakan efek paralaks 3D.

STAGE: FLOAT-DELAYED
Delayed Floating Layer
60 FPS
6s Loop • 2s Delay Asynchronous
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

15. Smooth Cross-Fade Image Dissolve

Entrance

Transisi pemudaran transparan murni untuk pergantian slide galeri atau tab konten.

STAGE: FADE-IN
Smooth Cross-Fade Image Dissolve
60 FPS
Opacity Only • Zero Paint Overhead
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

16. Kinetic Card Lift & Shadow Bloom

Micro

Pengangkatan kinetik 6px ke atas saat kursor diarahkan ke kartu, disertai pelebaran bayangan halus.

STAGE: CARD-HOVER
Kinetic Card Lift & Shadow Bloom
60 FPS
Micro-Interaction • 0.3s Cubic Bezier
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1);
}
High Performance Frontend

Ingin Website Hidup & Interaktif Tanpa Mengorbankan Skor Google?

Arsitektur CSS hardware accelerated kami menjamin seluruh interaksi mikro berjalan 60-120 FPS di smartphone apapun dengan Cumulative Layout Shift tetap 0.00.

Simulasi di Configurator →Konsultasi WhatsApp

Pertanyaan Sering Diajukan (FAQ) Animasi CSS

Pelajari optimasi Core Web Vitals, hardware acceleration GPU, dan aturan prefers-reduced-motion.

Pertanyaan yang Sering Diajukan (FAQ)

Jawaban transparan untuk pertanyaan seputar proses pengerjaan, biaya, kepemilikan, dan pemeliharaan website.

Mengapa animasi CSS murni (Pure CSS) jauh lebih baik daripada library JavaScript seperti Framer Motion?

Animasi CSS dieksekusi langsung oleh GPU browser (Compositor Thread) tanpa membebani Main Thread JavaScript. Ini menghasilkan gerakan mulus konsisten 60 hingga 120 FPS tanpa menyebabkan jank atau penurunan skor Interaction to Next Paint (INP) pada Google Core Web Vitals.

Bagaimana standar aksesibilitas prefers-reduced-motion diterapkan?

CSS global kami menyertakan aturan `@media (prefers-reduced-motion: reduce)` yang secara otomatis mematikan atau memperpendek durasi animasi (menjadi 0.01ms) bagi pengunjung yang memiliki sensitivitas vestibular atau mengaktifkan mode minim gerakan pada sistem operasi mereka.

Apakah animasi berulang (Continuous Float/Pulse) memboroskan baterai smartphone pengunjung?

Tidak. Semua efek melayang kami hanya menganimasikan properti `transform` dan `opacity` (properti bebas reflow/repaint). Browser modern secara otomatis menunda eksekusi animasi ketika tab tidak aktif atau elemen berada di luar viewport layar (off-screen).

Bagaimana cara menambahkan animasi bertingkat (Staggered Animation) pada daftar produk?

Kami menggunakan utility class delay bertingkat seperti `.delay-100`, `.delay-200`, dan `.delay-300` yang memanfaatkan `animation-delay`. Setiap kartu produk akan muncul berurutan dengan jeda 100ms tanpa memerlukan satu baris pun kode JavaScript.

Chat WA