CSS Animation Library

ภาพรวม

ทุกครั้งที่ต้องเพิ่ม animation เล็กๆ ต้องค้น Google ใหม่ โปรเจกต์นี้เป็น personal library ของ animation snippets ที่ใช้จริงบ่อยๆ มี demo page แบบ interactive ดูได้ก่อน copy

สิ่งที่ทำแล้ว

• Entrance animations — fadeIn, slideUp, slideLeft, scaleIn, flipIn (จาก @starting-style)
• Exit animations — fadeOut, slideDown, scaleOut
• Loading states — spinner (CSS border), skeleton shimmer, dot bounce, progress bar
• Micro-interactions — button press, checkbox check, like heart, toggle switch
• Scroll-driven — reveal on scroll ด้วย Animation Timeline
• Demo page — แต่ละ snippet มี preview กดเพื่อ replay และ copy code button

โครงสร้าง

animations/
├── entrance/   # fadeIn.css, slideUp.css, ...
├── exit/
├── loading/
├── micro/
└── scroll/
demo/           # Astro pages
├── entrance.astro
├── loading.astro
└── micro.astro

ตัวอย่าง Snippet

/* Fade Up — ใช้กับ @starting-style */
.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(12px);
  }
}

กำลังทำ

• Dark mode variants ที่ปรับสี glow ให้เหมาะกับ dark background
• View Transitions เวอร์ชัน — ใช้กับ ::view-transition-old/new
• npm package ให้ import class ได้แบบ utility

เทคโนโลยี

• Pure CSS (custom properties, @keyframes, @starting-style, Animation Timeline)
• Astro demo site (static)
• PostCSS สำหรับ bundle individual snippets