การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น

<h2>การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น<&sol;strong><br &sol;>&NewLine;การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ให้ดูน่าสนใจมากยิ่งขึ้น ทำให้ผู้ใช้งานเว็บไซต์ได้รู้สึกว่าเว็บไซต์มีปฏิสัมพันธ์กับผู้ใช้งานมากยิ่งขึ้น การทำ transition คือการปรับเปลี่ยนคุณลักษณะของวัตถุจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่ง ส่วนการทำอนิเมชั่นคือการทำการเคลื่อนไหวหรือเคลื่อนย้ายตำแหน่ง ขนาด องศา เป็นต้น<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>รู้จักคุณสมบัติของ CSS Transition<&sol;h4>&NewLine;<p>การทำงานของคำสั่ง transition ในภาษา CSS จะประกอบไปด้วย Property 4 ส่วนหลัก ๆ คือ<&sol;p>&NewLine;<ul>&NewLine;<li><strong>transition-delay<&sol;strong><br &sol;>&NewLine;คือระยะเวลาเป็นตัวเลขวินาทีก่อนที่จะให้เริ่มการทำงาน ตัวอย่างเช่น <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >transition-delay&colon; 1s&semi; &sol;&sol; คือ 1 วินาที ตัว s ย่อมากจาก second &NewLine;transition-delay&colon; 0&period;5s &sol;&sol; คือครึ่งวินาที หรือ 5&comma;00 millisecond<&sol;pre>&NewLine;<&sol;li>&NewLine;<li><strong>transition-duration<&sol;strong><br &sol;>&NewLine;คือระยะเวลาในการแสดงผลจากคุณลักษณะแรกไปยังคุณลักณะที่สอง สรุปช้าหรือเร็วสามารถกำหนดได้จาก Property นี้ได้เลยนั่นเอง ตัวอย่างเช่น <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;transition-duration&colon; 1s&semi; &sol;&sol; ถ้าเรากำหนดการเปลี่ยนสีของพื้นหลังก็จะใช้เวลาเปลี่ยน 1 วินาที &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li><strong>transition-property<&sol;strong><br &sol;>&NewLine;คือคุณสมบัติของ div หรือ element ที่เราต้องการให้เปลี่ยนแปลง เช่น background-color&comma; color&comma; border-color เป็นต้น ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลัง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;transition-property&colon; background-color&semi; &sol;&sol; เปลี่ยนสีพื้นหลังของ div นั้น ๆ &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li><strong>transition-timing-function<&sol;strong><br &sol;>&NewLine;คือรูปแบบหรือลักษณะในขณะที่กำลังเปลี่ยนแปลง ค่าเริ่มต้นจะเป็น ease และมีให้เลือกอีกมากมายเช่น linear&comma; ease-in&comma; ease-out&comma; ease-in-out เป็นต้น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;transition-timing-function&colon; linear&semi; &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การใส่ CSS Transition ให้ class และ id<&sol;h4>&NewLine;<p>ยกตัวอย่างการใช้งาน ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนสีพื้นหลังของ div เมื่อมีการ hover ที่ div นั้น ๆ เราสามารถเขียนคำสั่ง ก่อน และ หลัง ได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;content&lbrace; &sol;&sol; ใส่ชื่อ class หรือ id &NewLine;&Tab;background-color&colon;&num;9C0&semi; &NewLine;&Tab;height&colon;400px&semi; &NewLine;&Tab;transition-property&colon; background-color&semi; &NewLine; transition-duration&colon; 0&period;5s&semi; &NewLine; transition-timing-function&colon; linear&semi; &NewLine; transition-delay&colon; 0&period;1s&semi; &NewLine;&rcub; &NewLine;&period;content&colon;hover&lbrace; &sol;&sol; ใส่ชื่อ class หรือ id &NewLine;&Tab;background-color&colon;&num;09F&semi; &NewLine;&Tab;transition-property&colon; background-color&semi; &NewLine; transition-duration&colon; 0&period;5s&semi; &NewLine; transition-timing-function&colon; linear&semi; &NewLine; transition-delay&colon; 0&period;1s&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>จากตัวอย่างโค๊ดด้านบนจะเห็นว่า เริ่มต้น เราได้กำหนดสีพื้นหลังคือ background-color มีค่าเท่ากับสีเขียวคือ &num;9C0 และเมื่อมีการ hover เราได้เปลี่ยนให้สีพื้นหลังเป็นสีฟ้าคือ &num;09F หากเราไม่ใช้คำสั่ง transition เข้าไปช่วยพื้นหลังก็จะเปลี่ยนสีทันที แต่ถ้าหากเราใส่คำสั่ง transition เข้าไป พื้นหลังของคลาส content ก็จะค่อย ๆ เปลี่ยนสีตามระยะเวลา transition-duration นั่นเอง<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>การเขียน CSS Transition ให้สั้นลง<&sol;h4>&NewLine;<p>จากหัวข้อการใช้งานด้านบนจะเห็นว่าเราในการใช้งานคำสั่ง transition ให้แต่ละ div หรือ html element นั้นต้องเขียนคำสั่งยืดยาวเหลือเกิน เราสามารถปรับการเขียนให้สั้นลงได้ แต่ยังคงมีผลลัพธ์การทำงานเหมือนกัน โดยสามารถเขียนได้ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&period;content&lbrace; &sol;&sol; ใส่ชื่อ class หรือ id &NewLine;&Tab;background-color&colon;&num;9C0&semi; &NewLine;&Tab;height&colon;400px&semi; &NewLine;&Tab;transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &NewLine;&rcub; &NewLine;&period;content&colon;hover&lbrace; &sol;&sol; ใส่ชื่อ class หรือ id &NewLine;&Tab;background-color&colon;&num;09F&semi; &NewLine;&Tab;transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ปรับให้ CSS Transition ใช้งานได้ทุก Browser<&sol;h4>&NewLine;<p>จากตัวอย่างโค๊ดด้านบนหากเรานำไปใช้งาน ก็จะเจอปัญหาว่า เมื่อเปิดใช้งานในบาง browser จะไม่สามารถทำงานได้ เราจำเป็นจะต้องเพิ่มคำสั่งเพื่อให้ transition สามารถใช้งานได้ทุก browser ซึ่งคำสั่งก็ไม่ได้ยุ่งยากอะไร สามารถเขียนได้ในลักษณะดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >-webkit-transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &sol;&sol; สำหรับ Chrome&comma;Safari &NewLine;-moz-transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &sol;&sol; สำหรับ Firefox &NewLine;-o-transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &sol;&sol; สำหรับ Opera &NewLine;-ms-transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &sol;&sol; สำหรับ IE &NewLine;transition&colon; background-color 0&period;5s linear 0&period;1s&semi; &sol;&sol; สำหรับ browser เวอร์ชั่นใหม่ ๆ<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;