การเปลี่ยน CSS

เมื่อคุณออกแบบหน้าเว็บ คุณอาจต้องการเพิ่มการเปลี่ยนผ่านไปยังองค์ประกอบ การเปลี่ยนแปลงจะเกิดขึ้นเมื่อตรงตามเงื่อนไขที่กำหนด ตัวอย่างเช่น คุณอาจต้องการให้สีพื้นหลังของปุ่มเปลี่ยนไปเมื่อผู้ใช้วางเมาส์เหนือปุ่ม

คุณสามารถใช้คุณสมบัติการเปลี่ยน CSS และคุณสมบัติย่อยเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวเมื่อคุณสมบัติขององค์ประกอบ HTML เปลี่ยนไป

บทช่วยสอนนี้จะกล่าวถึงตัวอย่างบางส่วนเกี่ยวกับพื้นฐานของการเปลี่ยน CSS และวิธีใช้คุณสมบัติการเปลี่ยนเพื่อสร้างภาพเคลื่อนไหว CSS ในตอนท้ายของบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการทำงานกับการเปลี่ยน CSS และคุณสมบัติการเปลี่ยน

การเปลี่ยน CSS

โดยค่าเริ่มต้น เมื่อค่าของคุณสมบัติ CSS เปลี่ยนแปลง หน้าเว็บจะนำการเปลี่ยนแปลงไปใช้ทันที

ตัวอย่างเช่น หากคุณสร้างการเปลี่ยนแปลงรูปแบบที่เปิดใช้งานเมื่อเคอร์เซอร์วางเมาส์เหนือปุ่ม สไตล์ใหม่จะถูกนำมาใช้ทันทีที่ผู้ใช้วางเคอร์เซอร์ไว้เหนือปุ่ม ทันทีที่เคอร์เซอร์ของผู้ใช้เคลื่อนออกจากปุ่ม ปุ่มจะเปลี่ยนกลับเป็นสไตล์เริ่มต้นทันที

คุณลักษณะการเปลี่ยน CSS ใช้เพื่อสร้างการเปลี่ยนแปลงที่ราบรื่นระหว่างสองสไตล์ เมื่อคุณใช้คุณสมบัติการเปลี่ยน หน้าเว็บจะทำให้การเปลี่ยนแปลงระหว่างสองสไตล์เคลื่อนไหว คุณสมบัตินี้ช่วยให้คุณสร้างการเปลี่ยนแปลงสไตล์ที่สวยงามน่าพึงพอใจยิ่งขึ้น

มีสององค์ประกอบของการเปลี่ยน CSS เหล่านี้คือ:

• คุณสมบัติ CSS ใหม่ที่คุณต้องการนำไปใช้กับองค์ประกอบ
• ระยะเวลาของการเปลี่ยนแปลง

โดยค่าเริ่มต้น ระยะเวลาของการเปลี่ยนจะถูกตั้งค่าเป็น 0 วินาที ซึ่งหมายความว่าถ้าคุณไม่กำหนดระยะเวลา การเปลี่ยนแปลงที่คุณระบุจะไม่มีผล กล่าวคือ การเปลี่ยนแปลงรูปแบบจะเกิดขึ้นทันที

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ตัวอย่างการเปลี่ยน CSS

สมมติว่าเรากำลังออกแบบปุ่มสำหรับเว็บไซต์ และเราต้องการให้รูปแบบของปุ่มเปลี่ยนไปเมื่อผู้ใช้วางเคอร์เซอร์ไว้เหนือปุ่มนั้น เมื่อผู้ใช้ไม่ได้วางเคอร์เซอร์ไว้เหนือปุ่ม ปุ่มควรมีเส้นขอบสีน้ำเงิน จากนั้น เมื่อผู้ใช้วางเคอร์เซอร์เหนือปุ่มนั้น สีพื้นหลังของปุ่มควรเปลี่ยนจากสีเริ่มต้น (สีขาว) เป็นสีน้ำเงิน

ในทั้งสองสถานะ ปุ่มควรมีความสูง 100px กว้าง 100px และข้อความในปุ่มควรอยู่ตรงกลาง การเปลี่ยนแปลงระหว่างสองสถานะควรใช้เวลาสองวินาที

นี่คือรหัสที่เราจะใช้สร้างปุ่มนี้:

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

รหัสของเราส่งคืน:

[Code result here]


ในโค้ดของเรา เราระบุว่าปุ่มของเราควรมีความกว้าง 100px สูง 100px และเนื้อหาของปุ่มควรมีการจัดตำแหน่งกึ่งกลาง นอกจากนี้เรายังระบุเส้นขอบสีน้ำเงินทึบกว้าง 3 พิกเซลสำหรับปุ่มของเรา

เมื่อคุณวางเคอร์เซอร์ไว้เหนือปุ่ม คุณจะเห็นว่าสีพื้นหลังของปุ่มเปลี่ยนเป็นสีน้ำเงิน เมื่อคุณเลื่อนเคอร์เซอร์ออกไป สีพื้นหลังของปุ่มจะเปลี่ยนกลับเป็นสีขาว

ในตัวอย่างนี้ เราระบุช่วงการเปลี่ยนภาพสองวินาทีสำหรับคุณสมบัติสีพื้นหลัง ซึ่งหมายความว่าเมื่อผู้ใช้วางเคอร์เซอร์เหนือปุ่มนั้น สีพื้นหลังของปุ่มจะใช้เวลาสองวินาทีในการเปลี่ยนจากสีขาวเป็นสีน้ำเงินทั้งหมด หรืออีกนัยหนึ่ง การเปลี่ยนแปลงไม่ได้เกิดขึ้นทันที

ในทำนองเดียวกัน เมื่อผู้ใช้เลื่อนเคอร์เซอร์ออกจากปุ่ม สีพื้นหลังจะเปลี่ยนจากสีน้ำเงินเป็นสีขาวในช่วงสองวินาที ดังนั้นอีกครั้ง ไม่ใช่ในทันที ดังนั้น เราจึงสามารถเปลี่ยนสีพื้นหลังใหม่ได้ภายใน 2 วินาทีอย่างราบรื่นโดยอิงตามตำแหน่งของเคอร์เซอร์บนหน้า

จากนั้นเราระบุรูปแบบที่เราต้องการเรียกใช้เมื่อผู้ใช้วางเคอร์เซอร์เหนือปุ่ม เราทำได้โดยใช้ตัวเลือก :hover โปรแกรมใช้สไตล์ที่กำหนดไว้ในตัวเลือก :hover กับองค์ประกอบเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ CSS :hover selector โปรดอ่านคู่มือ CSS :hover selector ของเรา

เส้นโค้งความเร็วการเปลี่ยนภาพ

คุณสมบัติ Transition-timing-function ช่วยให้คุณสามารถระบุเส้นโค้งความเร็วของเอฟเฟกต์การเปลี่ยนแปลงได้ นี่คือค่าบางส่วนที่คุณสมบัตินี้ยอมรับ:

ค่านิยม (และคำอธิบายที่สอดคล้องกัน)

ของคุณสมบัติการเปลี่ยนเวลา-ฟังก์ชัน

อย่างที่คุณเห็น ค่าแรกในตารางนี้—“ease”—คือค่าดีฟอลต์ ซึ่งหมายความว่าถ้าคุณไม่ระบุค่าสำหรับคุณสมบัติ Transition-timing-Function หรือหากคุณไม่ได้ระบุคุณสมบัติเลยเมื่อกำหนดสไตล์การเปลี่ยนแปลง หน้าเว็บจะใช้ค่าเริ่มต้นตามค่านี้

ลองใช้โค้ดจากตัวอย่างสุดท้ายของเราเพื่อแสดงให้เห็นว่าคุณสมบัติ Transit-timing-function ทำงานอย่างไร ในตัวอย่างที่แล้ว เราระบุเส้นโค้งความเร็ว "ง่าย" ซึ่งหมายความว่าการจัดรูปแบบปุ่มของเราจะเปลี่ยนจากรูปแบบหนึ่งเป็นอีกรูปแบบหนึ่งด้วยการสตาร์ทช้า การเร่งความเร็วที่รวดเร็ว และการสิ้นสุดที่ช้า

อย่างไรก็ตาม สมมติว่าเราต้องการให้ปุ่มของเราเปลี่ยนเป็นสีพื้นหลังใหม่โดยใช้การเปลี่ยนเชิงเส้น เราสามารถทำได้โดยการระบุค่า "ความง่ายใน" นี่คือรหัสสำหรับสิ่งนี้:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

รหัสของเราส่งคืน:

[Result of code]


สไตล์ของเราส่วนใหญ่จะเหมือนกับสไตล์ที่เราใช้ในตัวอย่างที่แล้ว ข้อแตกต่างเพียงอย่างเดียวคือแทนที่จะระบุ ease การเปลี่ยนแปลง เราระบุ linear การเปลี่ยนแปลง ซึ่งหมายความว่าความเร็วของการเปลี่ยนแปลงจะยังคงสม่ำเสมอเมื่อมีการทริกเกอร์

ความล่าช้าในการเปลี่ยน

คุณสมบัติการหน่วงเวลาการเปลี่ยนภาพทำให้คุณสามารถระบุการหน่วงเวลาสำหรับเอฟเฟกต์การเปลี่ยนแปลงได้ ค่าที่กำหนดให้กับคุณสมบัติการหน่วงเวลาการเปลี่ยนควรเป็นหน่วยวินาที

สมมติว่าเราต้องการให้ปุ่มของเราเปลี่ยนเป็นสีพื้นหลังใหม่หลังจากผ่านไปหนึ่งวินาที เราสามารถทำภารกิจนี้ให้สำเร็จโดยใช้รหัสต่อไปนี้:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

รหัสของเราส่งคืน:

[Code result here]


ในโค้ดของเรา เราระบุการหน่วงเวลาของการเปลี่ยนเป็นหนึ่งวินาที ดังนั้น การเปลี่ยนแปลงจะไม่เริ่มจนกว่าจะถึงหนึ่งวินาทีหลังจากที่ผู้ใช้เริ่มวางเคอร์เซอร์เหนือปุ่ม

การใช้การเปลี่ยนหลายครั้ง

เมื่อคุณทำงานกับทรานซิชัน คุณอาจตัดสินใจว่าคุณต้องการให้เอฟเฟกต์การเปลี่ยนเกิดขึ้นมากกว่าหนึ่งรายการ

คุณสามารถทำได้โดยระบุทรานซิชันหลายๆ แบบและคั่นทรานซิชันแต่ละรายการด้วยเครื่องหมายจุลภาค การเปลี่ยนแต่ละครั้งสามารถมีระยะเวลา เส้นโค้งความเร็ว และคุณลักษณะอื่นๆ ที่การเปลี่ยนแปลงปกติจะใช้

ตัวอย่างเช่น ลองมาดูตัวอย่างปุ่มของเราก่อนหน้านี้ สมมติว่าเราต้องการเปลี่ยนไม่เพียงแต่สีพื้นหลังของปุ่มของเราเป็นสีน้ำเงิน แต่ยังต้องการเปลี่ยนสีขอบของปุ่มของเราเป็นสีชมพูด้วย ทั้งสองสิ่งนี้ควรเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบด้วยเคอร์เซอร์ เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

รหัสของเราส่งคืน:

[Code result here]


เมื่อคุณวางเมาส์เหนือปุ่ม สีพื้นหลังของปุ่มจะเปลี่ยนเป็นสีน้ำเงินและสีของเส้นขอบจะเปลี่ยนเป็นสีชมพูอ่อน การเปลี่ยนแปลงนี้ใช้เวลาสองวินาทีจึงจะเสร็จสมบูรณ์

ลำดับที่การเปลี่ยนแปลงแต่ละรายการในรายการการเปลี่ยนจะไม่ส่งผลต่อลักษณะการเปลี่ยนที่ปรากฏ

การเปลี่ยน CSS Longhand เทียบกับ Shorthand

ในตัวอย่างข้างต้น เราใช้คุณสมบัติการเปลี่ยนแปลงเพื่อจัดรูปแบบการเปลี่ยนแปลงของเรา คุณสมบัติการเปลี่ยนแปลงเป็นการจดชวเลขสำหรับคุณสมบัติย่อยสี่รายการที่ใช้ในการกำหนดการเปลี่ยนแปลงใน CSS คุณสมบัติย่อยสี่เหล่านี้คือ:

• คุณสมบัติการเปลี่ยนผ่าน :ตั้งค่าคุณสมบัติที่จะใช้เอฟเฟกต์การเปลี่ยนแปลง
• ช่วงการเปลี่ยนภาพ :ระบุว่าการเปลี่ยนแปลงจะใช้เวลานานแค่ไหน
• ฟังก์ชันเวลาเปลี่ยนผ่าน :กำหนดความเร็วของการเปลี่ยนแปลง
• การเปลี่ยนแปลง-ล่าช้า :ชะลอการเริ่มต้นของการเปลี่ยนแปลง

ลองใช้ตัวอย่างข้างต้นของเราเพื่อแสดงให้เห็นว่าคุณสมบัติเหล่านี้ทำงานอย่างไร สมมติว่าเราต้องการสร้างปุ่มขนาด 100px คูณ 100px ที่มีเส้นขอบสีน้ำเงิน สีพื้นหลังเริ่มต้น (สีขาว) และข้อความที่จัดกึ่งกลาง สีพื้นหลังของปุ่มของเราควรเปลี่ยนเป็นสีน้ำเงินเมื่อผู้ใช้วางเคอร์เซอร์เหนือปุ่มนั้น การเปลี่ยนแปลงนี้ควรใช้เวลา 2 วินาที และควรเริ่ม 0.5 วินาทีหลังจากที่ผู้ใช้เริ่มวางเมาส์เหนือปุ่มด้วยเคอร์เซอร์

เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

รหัสของเราส่งคืน:

[Code result]


อย่างที่คุณเห็น เราได้สร้างปุ่มที่เปลี่ยนจากสีพื้นหลังสีน้ำเงิน การเปลี่ยนแปลงเหล่านี้เกิดขึ้นเมื่อผู้ใช้วางเคอร์เซอร์เหนือและออกจากปุ่มตามลำดับ

ในโค้ดของเรา เราได้ระบุคุณสมบัติย่อยของการเปลี่ยนแปลงสี่ประการ (คุณสมบัติการเปลี่ยนผ่าน ระยะเวลาการเปลี่ยนภาพ ฟังก์ชันกำหนดเวลาการเปลี่ยน และระยะเวลาในการเปลี่ยนแปลง) สำหรับการเปลี่ยนแปลงของเรา เรายังใช้สไตล์จากตัวอย่างก่อนหน้านี้เพื่อกำหนดความสูง ความกว้าง การจัดตำแหน่งข้อความ และสีเส้นขอบของปุ่มของเรา

อีกทางหนึ่ง เราสามารถใช้ชวเลขการเปลี่ยนแปลง การใช้ชวเลขช่วยให้เราสามารถระบุการเปลี่ยนแปลง CSS ของเราในโค้ดหนึ่งบรรทัด แทนที่จะเป็นสี่บรรทัดที่เราใช้ก่อนหน้านี้ ไวยากรณ์สำหรับชวเลขการเปลี่ยนแปลงมีดังนี้:

การเปลี่ยนแปลง:การเปลี่ยนแปลงคุณสมบัติการเปลี่ยนแปลงระยะเวลา

ลำดับของค่าที่ระบุข้างต้นคือลำดับที่คุณต้องใช้เมื่อสร้างการเปลี่ยนแปลง

ลองใช้ตัวอย่างเพื่อแสดงให้เห็นว่าชวเลขการเปลี่ยนแปลงทำงานอย่างไร นี่คือรหัสที่เราจะใช้เพื่อสร้างปุ่มของเราจากรุ่นก่อนหน้าโดยใช้ชวเลขการเปลี่ยนแปลง:

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

รหัสของเราส่งคืน:

[Code result here]


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

บทสรุป

คุณสมบัติการเปลี่ยนแปลง CSS ใช้เพื่อกำหนดประเภทของการเปลี่ยนแปลงที่จะเกิดขึ้นระหว่างสไตล์ คุณสมบัติทรานซิชันมีคุณสมบัติชวเลขสี่:คุณสมบัติการเปลี่ยนแปลง, การเปลี่ยนแปลง-ล่าช้า, ฟังก์ชันเวลาเปลี่ยนและระยะเวลาการเปลี่ยนแปลง คุณสามารถใช้คุณสมบัติย่อยเหล่านี้เพื่อตั้งค่าองค์ประกอบของสไตล์การเปลี่ยนทีละรายการ

ด้วยตัวอย่าง บทช่วยสอนนี้กล่าวถึงวิธีสร้างการเปลี่ยนแปลงใน CSS โดยใช้คุณสมบัติการเปลี่ยนแปลงและคุณสมบัติย่อยสี่ประการ ตอนนี้คุณพร้อมที่จะเริ่มสร้างการเปลี่ยน CSS เหมือนนักพัฒนาเว็บมืออาชีพแล้ว!