เรียน CSS Animation | Day 1 - Heart
เขียนวันที่ : Jan 1, 2023

สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ สำหรับวันแรก ก็จะเป็นเรื่องง่ายๆ คือการใช้ keyframes ทำการ transform scale()
ให้เหมือนกับคล้ายๆ หัวใจเต้นครับ
- เรียนรู้ วันละ 1 เรื่อง และนำมาทำเป็น Blog หรือ Video Tutorial
- ตัวอย่างทั้งหมด อัพลง Codepen ครับ
- ไม่ได้เรียงลำดับความยากง่าย
ผมไม่ได้กำหนดนะครับ ว่าจะทำได้กี่วัน เป้าหมายแรก ผมขอแค่ 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;
}
สรุป
- สร้าง
keyframes
ชื่อpulse
ขึ้นมาใหม่ - เรียกใช้
animation: <name>
ที่เราตั้ง
เป็นอันเรียบร้อย วันแรกก็ของ่ายๆ เป็นวอร์มอัพก่อนละกัน ไว้เจอกันวันถัดไป
Happy Coding ❤️