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

การทำ 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 เวอร์ชั่นใหม่ ๆ