Andika Rekatias

Animations & Transitions dalam CSS

| CSS | css, tutorial, animations, transitions
Animations & Transitions dalam CSS

Halo teman-teman! 👋

Di artikel terakhir seri CSS ini, kita akan membahas salah satu topik paling seru: Animations & Transitions. Dengan CSS, kita bisa bikin elemen web bergerak, berubah warna, memutar, hingga efek-efek keren lainnya — tanpa JavaScript!

Yuk, kita mulai! 🚀

Apa itu Transitions?

CSS Transitions memungkinkan kamu membuat perubahan properti CSS secara gradual (bertahap) dari nilai awal ke nilai akhir. Jadi perubahan terjadi halus, bukan tiba-tiba.

/* Syntax dasar transition */
.element {
  transition: property duration timing-function delay;
}

/* Contoh */
.card {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #e74c3c;
}

Properti Transition

.button {
  /* shorthand: property duration timing-function delay */
  transition: all 0.3s ease-in-out 0s;
  
  /* atau property per property */
  transition-property: transform, opacity;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s, 0.1s;
}

Timing Functions

Timing function mengatur kecepatan transisi:

/* ease - default, lambat di awal & akhir */
.box {
  transition: transform 0.3s ease;
}

/* linear - kecepatan konstan */
.box {
  transition: transform 0.3s linear;
}

/* ease-in - lambat di awal */
.box {
  transition: transform 0.3s ease-in;
}

/* ease-out - lambat di akhir */
.box {
  transition: transform 0.3s ease-out;
}

/* ease-in-out - lambat di awal dan akhir */
.box {
  transition: transform 0.3s ease-in-out;
}

/* cubic-bezier - custom timing */
.box {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Transform

transform memungkinkan kamu memanipulasi elemen: memutar, memperbesar, memindahkan, dan memiringkan.

/* Translate - memindahkan elemen */
.box {
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translateX(20px);   /* geser horizontal */
  transform: translateY(-10px);  /* geser vertikal */
  transform: translate(20px, -10px); /* geser keduanya */
}

/* Rotate - memutar elemen */
.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(45deg);  /* putar 45 derajat */
  transform: rotate(-45deg); /* putar berlawanan */
}

/* Scale - memperbesar/mengecilkan */
.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2);   /* perbesar 120% */
  transform: scale(0.8);   /* perkecil 80% */
}

/* Skew - memiringkan */
.box {
  transition: transform 0.3s ease;
}

.box:hover {
  transform: skewX(10deg);
  transform: skewY(5deg);
}

/* Kombinasi transform */
.element {
  transition: transform 0.4s ease;
}

.element:hover {
  transform: translate(10px, -5px) rotate(5deg) scale(1.1);
}

Keyframe Animations

Kalau transitions butuh trigger (seperti hover), keyframe animations bisa berjalan otomatis dan punya lebih banyak kontrol.

Syntax Dasar

/* Definisikan keyframe */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Terapkan ke elemen */
.animated-element {
  animation: slideIn 0.5s ease forwards;
}

Properti Animation

.element {
  /* shorthand: name duration timing-function delay iteration-count direction fill-state play-state */
  animation: slideIn 0.5s ease-in-out 0s 1 normal forwards running;
  
  /* atau satu per satu */
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Iteration Count & Direction

/* Berulang terus */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading {
  animation: spin 1s linear infinite;
}

/* Berulang 3 kali */
.pulse {
  animation: pulse 0.5s ease 3;
}

/* Direction: alternate - bolak-balik */
.bounce {
  animation: bounce 0.5s ease-in-out infinite alternate;
}

/* Direction: reverse */
.reverse {
  animation: slideIn 0.5s ease reverse;
}

Fill Mode

/* forwards - pertahankan state akhir */
.element {
  animation: fadeIn 0.5s ease forwards;
}

/* backwards - apply state awal sebelum animasi mulai */
.element {
  animation: fadeIn 0.5s ease 1s backwards;
}

/* both - forwards + backwards */
.element {
  animation: fadeIn 0.5s ease 1s both;
}

Contoh Animasi Populer

1. Pulse Animation

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.notification-badge {
  animation: pulse 2s ease-in-out infinite;
}

2. Shake Animation (Error)

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.error-input {
  animation: shake 0.5s ease;
}

3. Fade In Up (Scroll Reveal)

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0; /* awalnya transparan */
}

4. Typing Effect (Animasi Cursor)

@keyframes blink {
  0%, 50% { border-right-color: transparent; }
  51%, 100% { border-right-color: black; }
}

.typing-text {
  border-right: 2px solid black;
  animation: blink 1s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
}

5. Gradient Animation

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb);
  background-size: 200% 200%;
  animation: gradientBG 3s ease infinite;
}

6. Bouncing Ball

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

.bouncing-ball {
  animation: bounce 1s ease infinite;
}

Hover Effects yang Keren

1. Button Glow

.glow-button {
  background: #6c5ce7;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.5),
              0 0 40px rgba(108, 92, 231, 0.3);
  transform: translateY(-2px);
}

2. Card Lift Effect

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

3. Image Overlay

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-wrapper img {
  transition: transform 0.5s ease;
}

.image-wrapper:hover img {
  transform: scale(1.1);
}

.image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.image-wrapper:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

4. Underline Effect

.nav-link {
  color: #333;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #6c5ce7;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

Scroll Animations dengan CSS

1. Scroll-Driven Animations (CSS Only)

/* Animasi berdasarkan scroll */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  animation: reveal linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

2. Parallax Effect dengan CSS

.parallax-container {
  height: 400px;
  overflow: hidden;
  position: relative;
}

.parallax-bg {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  bottom: -50px;
  background-image: url('background.jpg');
  background-size: cover;
  background-attachment: fixed;
}

3. Sticky Progress Bar

@keyframes growProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #6c5ce7;
  transform-origin: left;
  animation: growProgress linear forwards;
  animation-timeline: scroll();
}

Performance Tips ⚡

Ini penting banget! Animasi yang salah bisa bikin website jadi lambat.

✅ Property yang Aman di-Animate

/* Gunakan hanya transform dan opacity untuk animasi smooth */
.optimized {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ❌ JANGAN animasi ini (trigger layout/reflow): */
/* width, height, margin, padding, top, left, border */

/* ✅ AMAN di-animasi (tidak trigger layout): */
/* transform, opacity, filter, box-shadow */

✅ Gunakan will-change dengan Bijak

/* Beri hint ke browser tentang property yang akan diubah */
.animated-element {
  will-change: transform, opacity;
}

/* Jangan overuse! Hanya untuk elemen yang benar-benar akan dianimasikan */
/* Hapus setelah animasi selesai */

✅ Gunakan transform: translateZ(0) atau backface-visibility

/* Force GPU acceleration */
.smooth-element {
  transform: translateZ(0);
  /* atau */
  backface-visibility: hidden;
}

✅ Gunakan requestAnimationFrame dengan JavaScript

// Untuk animasi yang kompleks, gunakan JS
function animate() {
  // update animasi
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

✅ Gunakan CSS Containment

/* Isolasi elemen untuk performa lebih baik */
.animated-section {
  contain: layout style;
}

Best Practices 📝

1. Gunakan CSS Custom Properties

:root {
  --transition-speed: 0.3s;
  --transition-easing: ease;
}

.button {
  transition: all var(--transition-speed) var(--transition-easing);
}

/* Mudah diubah untuk dark mode atau prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-speed: 0.01s;
  }
}

2. Respect User Preferences

/* Hanya animasi untuk user yang suka */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

3. Ketahui Kapan Gunakan Transition vs Animation

Kapan Gunakan
Perubahan saat hover/focus transition
Animasi berulang/otomatis @keyframes + animation
Scroll-triggered animation-timeline
Satu kali transisi transition

4. Naming Convention

/* Gunakan nama yang deskriptif */
@keyframes fadeInUp { /* ... */ }
@keyframes slideInLeft { /* ... */ }
@keyframes pulse { /* ... */ }
@keyframes spin { /* ... */ }

/* Bukan: */
@keyframes anim1 { /* ... */ }
@keyframes awesome { /* ... */ }

Ringkasan

  • Transitions → perubahan gradual saat state berubah (hover, focus)
  • Transform → rotate, scale, translate, skew tanpa trigger layout
  • Keyframe Animations → animasi otomatis dengan banyak kontrol
  • Performance → animasikan hanya transform dan opacity
  • Accessibility → selalu respect prefers-reduced-motion
← Sebelumnya: Responsive Design
Mail Facebook Twitter Whatsapp