ที่มาของภาพ : https://web.dev/learn/css/animations
วันนี้เรามาทำ Animation ใน CSS กันด้วย HTML และ CSS กันครับ อาจจะดูเป็นเรื่องพื้นฐานใช่ไหมล่ะครับ แต่ขอบอกเลยว่าในบทความนี้เพื่อน ๆ จะได้ทำ Animation สวย ๆ เป็นของตัวเอง โดยที่ไม่ต้องใช้เฟรมเวิร์กหรือตัวช่วยอื่น ๆ เลย
หากเราพูดถึงคำว่า Animation เราจะนึกถึงอะไรที่ง่าย ๆ ก็อาจจะเป็นภาพหลาย ๆ ภาพที่มาต่อกันเรื่อย ๆ จนเราเห็นเป็นภาพเคลื่อนไหว
ที่มาของภาพ : https://www.deviantart.com/luigil/art/Little-Leo-s-First-Steps-282791832
แล้วถ้าเป็นในการทำเว็บ แล้วเราอยากได้ Animation ขยับได้มาใช้บ้างล่ะ เราจะทำยังไง จริง ๆ แล้วเราสามารถทำได้หลายวิธี แต่วิธีที่ผมจะเอามาแชร์จะเป็นวิธีที่ง่ายที่สุดในการทำ ด้วยเจ้า CSS Animation ที่สามารถต่อยอดพื้นฐาน CSS มาประยุกต์ใช้ได้ ข้อดีเลยคือ
- ใช้งานง่าย
- มีพื้นฐาน CSS ระดับเบื้องต้นก็เริ่มใช้งานได้
- ปรับแต่งได้อิสระมาก ๆ
แล้วถ้าเราอยากจะสร้าง CSS Animation ต้องรู้อะไรบ้าง
- CSS Transition ใช้สำหรับการเปลี่ยนค่าช้า ๆ เช่น เราต้องการเปลี่ยนสี Element ให้สมูท Transition จะตอบโจทย์ในจุดนี้มาก ๆ ในการใช้งานจริง ๆ ก็จะมีใช้กับการทำ hover, focus, click เป็นต้น
- CSS keyframe เป็นการสร้างแอนิเมชันแบบกำหนดเอง สามารถทำการเคลื่อนไหวได้ต่อเนื่องกัน เหมาะกับการใช้กับ Element ที่ไม่ต้องยุ่งกับ event เช่น ทำกล่องเคลื่อนที่จากซ้ายไปขวา, การหมุนวัตถุ หรือจะเป็นการเปลี่ยนสีพื้นหลังก็ได้เหมือนกัน
พอเรารู้เรื่องหลักการไปแล้วว่าเราจะทำ CSS Animation ยังไงบ้าง ต่อไปเราจะไปลองทำกันในโค้ดจริง ๆ กัน
เริ่มด้วยลองทำ CSS Transition แบบง่าย ๆ ที่ไว้เล่นกับการ Hover ปุ่ม
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Transition Example</title>
<style>
.center-box {
max-width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.btn {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
transition: background-color 0.4s ease, transform 0.3s ease;
}
.btn:hover {
background-color: #2ecc71;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="center-box">
<button class="btn">Hover Me!</button>
</div>
</body>
</html>สุดท้ายเราจะได้ปุ่มที่เวลา Hover จะมีการเปลี่ยนสีและเอฟเฟกต์นิด ๆ หน่อย ๆ
ต่อมาเราจะทำ Animation ง่าย ๆ ด้วยการใช้ CSS @keyframes กันนะครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Example</title>
<style>
.ball {
width: 60px;
height: 60px;
background-color: #e74c3c;
border-radius: 50%;
margin: 100px auto;
animation: bounce 1s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-60px);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
เราก็จะได้ Animation ลูกบอลลอยไปลอยมาแบบง่าย ๆ กันแล้วนะครับ
ทีนี้เราจะเริ่มเห็นภาพแล้วใช่ไหมล่ะครับว่า CSS มันสามารถทำ Animation ได้ และ Animation ที่เราจะมาลองทำกันวันนี้จะเป็นการทำ Animation Card Flip ง่าย ๆ กัน โดยที่ เอาเมาส์ไปวางบนการ์ด (hover) การ์ดจะ หมุนกลับโชว์ด้านหลัง แล้วมี Animation สวย ๆ ด้วยนะ อยากทำแล้วใช่ไหมล่ะ เราไปทำกันเลยยย
โดยเราจะมาขึ้นโครง HTML เปล่า ๆ กันก่อนครับ โดยจะสร้างไฟล์ชื่อ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Card Flip Animation</title>
</head>
<body>
<div class="card-container">
<div class="card">
<div class="card-face front">ด้านหน้า</div>
<div class="card-face back">ด้านหลัง</div>
</div>
</div>
</body>
</html>ต่อมาเราเขียน CSS กันในไฟล์ styles.css กำหนดพื้นที่ของ body เริ่มกันก่อนนะครับ
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: sans-serif;
}ผลลัพธ์ที่ได้
ตอนนี้จะยังไม่มีอะไรมากเท่าไหร่ ต่อไปเราจะเพิ่ม styles.css ให้สวยขึ้นกัน โดยเราจะทำให้ div ของการ์ดด้านหน้าและด้านหลังมีลูกเล่นเพิ่มขึ้นกันครับ
.card-container {
perspective: 1000px; /* กำหนดระยะมุมมอง 3D ให้กับลูก (card) เพื่อให้เห็นเอฟเฟกต์หมุนแบบมีมิติ */
}
.card {
width: 300px; /* กำหนดความกว้างของการ์ด */
height: 200px; /* กำหนดความสูงของการ์ด */
position: relative; /* เพื่อให้ลูก .card-face ที่เป็น absolute ยึดตามนี้ */
transform-style: preserve-3d; /* ทำให้ลูก (ด้านหน้า/หลัง) แสดงผลแบบ 3D */
transition: transform 0.8s; /* ทำให้การเปลี่ยนแปลงของ transform เกิดแบบนุ่มนวลใน 0.8 วินาที */
}
.card-container:hover .card {
transform: rotateY(180deg); /* เมื่อ hover ที่ .card-container การ์ดจะหมุนรอบแกน Y 180 องศา */
}
.card-face {
position: absolute; /* ให้ตำแหน่งซ้อนทับกันพอดี */
width: 100%; /* กว้างเต็มการ์ด */
height: 100%; /* สูงเต็มการ์ด */
backface-visibility: hidden; /* ซ่อนด้านหลังของแต่ละด้านเวลาหมุน */
border-radius: 10px; /* มุมโค้งมน */
display: flex; /* ใช้ flex จัดตำแหน่งข้อความ */
justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
font-size: 24px; /* ขนาดตัวอักษร */
color: white; /* สีตัวหนังสือ */
}
.front {
background-color: #4a90e2; /* พื้นหลังด้านหน้าเป็นสีน้ำเงิน */
}
.back {
background-color: #e94e77; /* พื้นหลังด้านหลังเป็นสีชมพู */
transform: rotateY(180deg); /* หมุนด้านหลังไว้ล่วงหน้า 180 องศาเพื่อให้หันกลับถูกต้องเมื่อการ์ดหมุน */
}
เราจะได้ผลลัพธ์เป็นแบบนี้ สวยดูดีมาก ๆ เลยใช่ไหมล่ะ
โดยเราจะใช้ transform, transition, transform-style, และ perspective เพื่อสร้าง Animation แบบ 3D
- transform ใช้ของหมุน เช่น rotateY หรือเปลี่ยนรูปร่างของ Element เช่น หมุน ขยาย ย้าย
- transition ทำให้เอฟเฟกต์ของ transform ดูลื่นไหล ไม่เกิดเร็วเกินไป เช่น เวลา hover แล้วหมุน
- transform-style ใช้กำหนดว่า Element นั้นจะมีเอฟเฟกต์แบบ 2D หรือ 3D และ ที่เราใช้ preserve-3d จะเก็บลูกเล่นมิติไว้ ทำให้เห็นเอฟเฟกต์ เวลาที่เราหมุนของไปมา หน้า/หลัง
- perspective คือการกำหนดมุมมองของผู้ใช้เพื่อทำให้เห็นความลึกเมื่อ Element หมุน
นี่ก็จะเป็นตัวอย่างการทำ CSS Animation แบบเบื้องต้นที่เพื่อน ๆ ทุกคนสามารถทำตามได้ง่าย ๆ กันครับ หวังว่าบทความนี้จะมีประโยชน์กับเพื่อน ๆ ไม่มากก็น้อยนะครับ
