ทำความเข้าใจ CSS3 Transitions

ไม่ได้ว่างมาก หรือไม่ได้ คึกเกินปกติ แต่เป็นความตั้งใจใหม่ ที่จะให้ thaicss.com มีบทความใหม่ ทุกๆ 7 วัน หรือ 1 เดือนอย่างน้อยก็ให้ได้ 4 บทความ วันนี้จึงมีบทความใหม่เพิ่มขึ้นมา เหมือนดั่งไม่เคยปรากฎมาก่อน เพราะก่อนหน้านี้ เป็นๆ หายๆ ตลอดเวลา บางคราสองเดือนยังไม่มีสักบทความ เอาเป็นว่ามาเริ่มนับกันใหม่แล้วกันขอรับ

สำหรับวันนี้ เรายังอยู่ในเรื่องของ CSS เหมือนเดิม ขอพูดถึงเรื่อง การ Transitions ของ CSS3 ครับ

ในความหมายของ CSS การ Transitions คือ การเปลี่ยนค่า ใดๆ จาก A ไป B โดยระหว่างที่เปลี่ยนค่านั้น เราสามารถเห็นค่าความเปลี่ยนแปลงไปด้วย

ก่อนหน้านี้ ใน CSS เมื่อเกิดการเปลี่ยนแปลงเกิดขึ้น เราไม่สามารถมองเห็นการ ถ่ายโอนค่า เช่น ถ้าเราเรา สั่ง :hover แล้วให้เปลี่ยนพื้นหลังจากสี ดำ เป็นสีขาว การเปลี่ยนค่านั้นจะเปลี่ยนไปทันที โดยที่เราไม่เห็นว่า สีดำมันค่อยๆ จางลงจนกลายเป็นสีขาว
จนกระทั่ง CSS3 เข้ามาและมี Transitions Module เราจึงสามารถทำให้การเปลี่ยนค่านั้นยืดเวลาออกไป จากดำค่อยๆ เป็นเทา จาง จาง จาง และขาวไปในที่สุด โดยเราสามารถกำหนดการ transition ให้กับ property ของ CSS ก็ได้ โดยไม่เกินเลยเงื่อนไขที่ ภาษากำหนดไว้

คุณสมบัติต่างๆ ที่ มีนั้น มีอะไรบ้าง

1. transition-property คือ การกำหนดว่า ใน selector นั้นๆ เราจะทำ transition ให้กับ property ใดบ้าง
2. transition-duration คือ ระยะเวลาของการ เปลี่ยนถ่าย จากจุด A ไปยัง B ใช้เวลาเท่าไหร่ ให้กำหนดเป็นวินาที
3. transition-timing-function คือ รูปแบบการเกิดการ transition มี ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
4. transition-delay คือ การหน่วงเวลาของการเกิด transition
5. transition คือ การเขียน Shorthand propery ให้เรียงตามนี้ [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]

ตัวอย่างการเขียน

ตัวอย่างการเขียน CSS3 Transitions

HTML:

<ul>
<li><span>ตัวอย่างที่ 1 ง่ายๆ ลอง click ครับ</span></li>
        <li><span>ตัวอย่างที่ 2 เพิ่มความซับซ้อน</span>
        <ul>
                <li><img src="imgs_transition/IMG_1982.jpg" alt="bangkok night" /></li>
                <li><img src="imgs_transition/IMG_2187.jpg" alt="วัดพระแก้ว" /></li>
                <li><img src="imgs_transition/IMG_2220.jpg" alt="วัดพระแก้ว" /></li>
                <li><img src="imgs_transition/IMG_2250.jpg" alt="วัดพระแก้ว" /></li>
                <li><img src="imgs_transition/IMG_2268.jpg" alt="วัดพระแก้ว" /></li>
        </ul>
        </li>
</ul>

CSS: (สำหรับ li ที่ 1)

body>ul>li {
	width: 20%;
	height: 25px;
	line-height: 25px;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 1px;
	padding: 0 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
	background: rgba(50, 50, 50, .3);

	-moz-transition-property: width, background, height;
	-webkit-transition-property: width, background, height;
	-o-transition-property: width, background, height;
	transition-property: width, background, height;

	-moz-transition-duration: 2s, 3s, 1s;
	-webkit-transition-duration: 2s, 3s, 1s;
	-o-transition-duration: 2s, 3s, 1s;
	transition-duration: 2s, 3s, 1s;

	-webkit-transition-delay: 0s, 0s, 2s;
	-moz-transition-delay: 0s, 0s, 2s;
	-o-transition-delay: 0s, 0s, 2s;
	transition-delay: 0s, 0s, 2s;

	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;/*หมายถึง ความกว้างทำ 2 วิ และ พื้นหลังทำ 4วิ และสูง 1 วิ*/
}
.transitions {
	width: 80%;
	height: 220px;
	background: rgba(50, 50, 50, .6);
	cursor: default;
}

Java Script (ผมใช้ jQuery)

$("body>ul>li").click(function () {
      $(this).toggleClass("transitions");
    });

ในตัวอย่างนี้จำเป็นต้องใช้ Java Script เพื่อช่วยในการ ทำให้เห็นภาพมากยิ่งขึ้น ผมเลือกใช้ jQuery Toggle Class และผมขออนุญาต ไม่อธิบายเรื่อง jQuery นะครับ ไม่ถนัดเรื่องนี้ แค่พอ งูๆ ปลาๆ แต่จะอธิบายเพิ่มเรื่องการ เอาคลาส .transitions เข้ามาเมื่อ click() (นั่น มันยังวนมาอยู่ดี) หรือ คลิ๊กครั้งแรก ให้ เพิ่มคลาส transitions เข้ามา และคลิ๊กลงไปอีกครั้งให้เอาคลาส transitions ออกไป

.transitions {
	width: 80%;
	height: 220px;
	background: rgba(50, 50, 50, .6);
	cursor: default;
}

เรื่องการ Transitions ของ CSS3 มันอยู่ตรงนี้แหละครับ เมื่อเรา เพิ่มคลาส transition เข้ามาแล้ว ค่าของ css ต่างๆ ที่เราต้องการให้เปลี่ยนแปลงไปนั้น จะถูกเพิ่มเข้ามาใน class นี้ โดยแยกออกตามตัวอย่างที่ผมได้เขียนเอาไว้ มีประมาณนี้

1. ความกว้าง จากค่าเดิม คือ 20% พอเพิ่มคลาส transitions เข้ามา เปลี่ยนความกว้างเป็น 80% การ Transition จะเกิดขึ้นคือ เราจะเห็นการเพิ่มความกว้างจาก 20% ไปยัง 80% ในเวลา 2 วินาที
2. ความสูง จากค่าเดิม คือ 25px พอเพิ่มคลาส transitions เข้ามา เปลี่ยนความสูงเป็น 220px การ Transition จะเกิดขึ้นคือ เราจะเห็นการเพิ่มความสูงจาก 25px ไปยัง 220px ในเวลา 4 วินาที
3. พื้นหลัง หรือ background จากค่าเดิม คือ สี rgb 50,50,50 และมีค่า alpha .3 เมื่อเพิ่มคลาส transition เข้ามา การ Transition ที่เกิดขึ้น คือ เปลี่ยนค่า alpha เป็น .6 ในระยะเวลา 1 วินาที

ตัวอย่างการเขียน CSS3 Transitions

ในตัวอย่างที่ เป็น li ตัวที่ 2 นั้น ผมไม่ขออธิบายเพิ่มเติมนะครับ

การที่ผมไม่ได้อธิบายเพิ่มเติม ไม่ใช่ว่าผมจะเก็บงำความลับของสามเหลี่ยมอินโดจีน เอาไว้คนเดียว แต่อยากให้เราๆ ท่านๆ ได้ลองแกะ แงะดู จะได้ลองๆ เล่นๆ ไว้

ตามตัวอย่าง li ตัวที่สอง ที่ผมซ่อน ul>li เอาไว้อีกที จุดสำคัญอยู่ที่การสั่ง delay ของ transition ครับ ถ้า view source ก็จะเห็นว่ามันเขียนยังไง

มีความสุขกับการใช้ชีวิตครับ