การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น
การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น
การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ให้ดูน่าสนใจมากยิ่งขึ้น ทำให้ผู้ใช้งานเว็บไซต์ได้รู้สึกว่าเว็บไซต์มีปฏิสัมพันธ์กับผู้ใช้งานมากยิ่งขึ้น การทำ transition คือการปรับเปลี่ยนคุณลักษณะของวัตถุจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่ง ส่วนการทำอนิเมชั่นคือการทำการเคลื่อนไหวหรือเคลื่อนย้ายตำแหน่ง ขนาด องศา เป็นต้น
รู้จักคุณสมบัติของ CSS Transition
การทำงานของคำสั่ง transition ในภาษา CSS จะประกอบไปด้วย Property 4 ส่วนหลัก ๆ คือ
- transition-delay
คือระยะเวลาเป็นตัวเลขวินาทีก่อนที่จะให้เริ่มการทำงาน ตัวอย่างเช่นtransition-delay: 1s; // คือ 1 วินาที ตัว s ย่อมากจาก second transition-delay: 0.5s // คือครึ่งวินาที หรือ 5,00 millisecond
- transition-duration
คือระยะเวลาในการแสดงผลจากคุณลักษณะแรกไปยังคุณลักณะที่สอง สรุปช้าหรือเร็วสามารถกำหนดได้จาก Property นี้ได้เลยนั่นเอง ตัวอย่างเช่นtransition-duration: 1s; // ถ้าเรากำหนดการเปลี่ยนสีของพื้นหลังก็จะใช้เวลาเปลี่ยน 1 วินาที
- transition-property
คือคุณสมบัติของ div หรือ element ที่เราต้องการให้เปลี่ยนแปลง เช่น background-color, color, border-color เป็นต้น ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลังtransition-property: background-color; // เปลี่ยนสีพื้นหลังของ div นั้น ๆ
- transition-timing-function
คือรูปแบบหรือลักษณะในขณะที่กำลังเปลี่ยนแปลง ค่าเริ่มต้นจะเป็น ease และมีให้เลือกอีกมากมายเช่น linear, ease-in, ease-out, ease-in-out เป็นต้นtransition-timing-function: linear;
การใส่ CSS Transition ให้ class และ id
ยกตัวอย่างการใช้งาน ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลังของ div เมื่อมีการ hover ที่ div นั้น ๆ เราสามารถเขียนคำสั่ง ก่อน และ หลัง ได้ดังนี้
.content{ // ใส่ชื่อ class หรือ id background-color:#9C0; height:400px; transition-property: background-color; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 0.1s; } .content:hover{ // ใส่ชื่อ class หรือ id background-color:#09F; transition-property: background-color; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 0.1s; }
จากตัวอย่างโค๊ดด้านบนจะเห็นว่า เริ่มต้น เราได้กำหนดสีพื้นหลังคือ background-color มีค่าเท่ากับสีเขียวคือ #9C0 และเมื่อมีการ hover เราได้เปลี่ยนให้สีพื้นหลังเป็นสีฟ้าคือ #09F หากเราไม่ใช้คำสั่ง transition เข้าไปช่วยพื้นหลังก็จะเปลี่ยนสีทันที แต่ถ้าหากเราใส่คำสั่ง transition เข้าไป พื้นหลังของคลาส content ก็จะค่อย ๆ เปลี่ยนสีตามระยะเวลา transition-duration นั่นเอง
การเขียน CSS Transition ให้สั้นลง
จากหัวข้อการใช้งานด้านบนจะเห็นว่าเราในการใช้งานคำสั่ง transition ให้แต่ละ div หรือ html element นั้นต้องเขียนคำสั่งยืดยาวเหลือเกิน เราสามารถปรับการเขียนให้สั้นลงได้ แต่ยังคงมีผลลัพธ์การทำงานเหมือนกัน โดยสามารถเขียนได้ดังนี้
.content{ // ใส่ชื่อ class หรือ id background-color:#9C0; height:400px; transition: background-color 0.5s linear 0.1s; } .content:hover{ // ใส่ชื่อ class หรือ id background-color:#09F; transition: background-color 0.5s linear 0.1s; }
ปรับให้ CSS Transition ใช้งานได้ทุก Browser
จากตัวอย่างโค๊ดด้านบนหากเรานำไปใช้งาน ก็จะเจอปัญหาว่า เมื่อเปิดใช้งานในบาง browser จะไม่สามารถทำงานได้ เราจำเป็นจะต้องเพิ่มคำสั่งเพื่อให้ transition สามารถใช้งานได้ทุก browser ซึ่งคำสั่งก็ไม่ได้ยุ่งยากอะไร สามารถเขียนได้ในลักษณะดังนี้ครับ
-webkit-transition: background-color 0.5s linear 0.1s; // สำหรับ Chrome,Safari -moz-transition: background-color 0.5s linear 0.1s; // สำหรับ Firefox -o-transition: background-color 0.5s linear 0.1s; // สำหรับ Opera -ms-transition: background-color 0.5s linear 0.1s; // สำหรับ IE transition: background-color 0.5s linear 0.1s; // สำหรับ browser เวอร์ชั่นใหม่ ๆ