เรียน​ CSS Animation | Day 1 - Heart

สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ สำหรับวันแรก ก็จะเป็นเรื่องง่ายๆ คือการใช้ keyframes ทำการ transform scale() ให้เหมือนกับคล้ายๆ หัวใจเต้นครับ

1. เรียนรู้ วันละ 1 เรื่อง และนำมาทำเป็น Blog หรือ Video Tutorial
2. ตัวอย่างทั้งหมด อัพลง Codepen ครับ
3. ไม่ได้เรียงลำดับความยากง่าย

ผมไม่ได้กำหนดนะครับ ว่าจะทำได้กี่วัน เป้าหมายแรก ผมขอแค่ 21 วัน ก่อน แล้วเดี๋ยวจะขยับเองครับ ถ้ายังทำได้ ก็จะเพิ่มไป 30, 100, 180 ก็ค่อยว่ากันครับ ไม่อยากกดดันตัวเอง

Day 1

สำหรับวันแรกผลลัพธ์จะเป็นแบบนี้

See the Pen on https://codepen.io/phonbopit/pen/wvxWWKX/

สามารถดูแบบ Video ได้จาก Link Youtube ครับ

Step 1 - สร้าง keyframes

สร้าง Keyframes pulse ขึ้นมา ให้มัน transform: scale(1.1)

@keyframes pulse {
  10% {
    tranform: scale(1.1);
  }
}

Step 2 - HTML

ไฟล์ HTML มีดังต่อไปนี้ (ตัว SVG เอามาจาก heroicons)

<div class="container">
  <h1 class="title">Day 1 - Heart</h1>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
    </svg>
  </div>
</div>

Step 3 - ใช้ animation

.icon {
  animation: 1s pulse infinite;
}

สรุป

1. สร้าง keyframes ชื่อ pulse ขึ้นมาใหม่
2. เรียกใช้ animation: <name> ที่เราตั้ง

เป็นอันเรียบร้อย วันแรกก็ของ่ายๆ เป็นวอร์มอัพก่อนละกัน ไว้เจอกันวันถัดไป

Happy Coding ❤️