โดยปกติเมื่อค่าคุณสมบัติ CSS เปลี่ยนแปลง เบราว์เซอร์จะอัปเดตสไตล์ที่เกี่ยวข้องทันที ตัวอย่างเช่น เมื่อวางเมาส์เหนือองค์ประกอบ สไตล์ที่กำหนดผ่านตัวเลือก :hover จะถูกนำไปใช้กับองค์ประกอบทันที มีการเพิ่มฟังก์ชันการเปลี่ยนภาพใน CSS3 ซึ่งคุณสามารถเปลี่ยนองค์ประกอบจากสไตล์หนึ่งไปอีกสไตล์หนึ่งได้อย่างราบรื่นภายในเวลาที่กำหนด คล้ายกับแอนิเมชั่นธรรมดา แต่ไม่จำเป็นต้องใช้แฟลชหรือ JavaScript
CSS มีคุณสมบัติ 5 ประการที่เกี่ยวข้องกับการเปลี่ยนแปลงดังนี้:
หากต้องการใช้เอฟเฟกต์การเปลี่ยนแปลงให้สำเร็จ ต้องกำหนดสองสิ่ง:
(1) คุณสมบัติของพารามิเตอร์และเอฟเฟกต์การเปลี่ยนแปลงในองค์ประกอบ
(2) ระยะเวลาของเอฟเฟกต์การเปลี่ยนแปลง
เคล็ดลับ: เอฟเฟกต์การเปลี่ยนแปลงมักจะเกิดขึ้นเมื่อวางเมาส์เหนือองค์ประกอบ หากไม่ได้ตั้งค่าระยะเวลาการเปลี่ยนแปลง เอฟเฟกต์การเปลี่ยนแปลงจะไม่มีผลเนื่องจากค่าเริ่มต้นของเวลาการเปลี่ยนแปลงคือ 0
1. การเปลี่ยนแปลงคุณสมบัติ
แอตทริบิวต์การเปลี่ยนแปลงคุณสมบัติที่ใช้ในการตั้งชื่อของแอตทริบิวต์ในองค์ประกอบที่มีส่วนร่วมในการเปลี่ยนรูปแบบไวยากรณ์จะเป็นดังนี้:
การเปลี่ยนแปลงคุณสมบัติ: ไม่มี | ทั้งหมด | คุณสมบัติ;
คำอธิบายพารามิเตอร์มีดังนี้:
none: บ่งชี้ว่าไม่มีแอ็ตทริบิวต์ใดมีส่วนร่วมในเอฟเฟกต์การเปลี่ยนแปลง
ทั้งหมด: บ่งชี้ว่าคุณลักษณะทั้งหมดมีส่วนร่วมในเอฟเฟกต์การเปลี่ยนแปลง
คุณสมบัติ: กำหนดรายการชื่อคุณสมบัติ CSS ที่ใช้เอฟเฟกต์การเปลี่ยนแปลง ใช้เครื่องหมายจุลภาคเพื่อแยกชื่อคุณสมบัติหลายชื่อ
รหัสตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p คุณสมบัติ: ความกว้าง, พื้นหลัง;} div: โฮเวอร์ {ความกว้าง: 200px; พื้นหลังสี: สีฟ้า; </style></head><body><div></div></body></html>ผลการวิ่ง:
2. ระยะเวลาการเปลี่ยนแปลง
แอ็ตทริบิวต์ transition-duration ใช้เพื่อตั้งเวลาที่ใช้ในการเปลี่ยนแปลง (เป็นวินาทีหรือมิลลิวินาที) ไวยากรณ์จะเป็นดังนี้:
ระยะเวลาการเปลี่ยนแปลง: เวลา;
เวลาคือเวลาที่ใช้ในการทำให้เอฟเฟกต์การเปลี่ยนแปลงเสร็จสมบูรณ์ (เป็นวินาทีหรือมิลลิวินาที) ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าจะไม่มีผลกระทบใด ๆ
หากมีแอตทริบิวต์หลายรายการเข้าร่วมในการเปลี่ยนแปลง คุณยังสามารถตั้งเวลาการเปลี่ยนแปลงสำหรับแอตทริบิวต์เหล่านี้ได้ตามลำดับ ใช้เครื่องหมายจุลภาคเพื่อแยกแอตทริบิวต์หลายรายการ เช่น ระยะเวลาการเปลี่ยน: 1s, 2s, 3s; นอกจากนี้ คุณยังสามารถใช้เวลาเพื่อกำหนดเวลาที่จำเป็นสำหรับการเปลี่ยนแปลงสำหรับพร็อพเพอร์ตี้ทั้งหมดที่เข้าร่วมในการเปลี่ยนแปลงได้อีกด้วย รหัสตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width, พื้นหลัง; การเปลี่ยนผ่านระยะเวลา: .25 วินาที, 1 วินาที;} div: โฮเวอร์ {ความกว้าง: 200px; พื้นหลังสี: สีฟ้า; </style></head><body><div></div></body>< /html>3. ฟังก์ชั่นการเปลี่ยนเวลา
แอตทริบิวต์ transition-timing-function ใช้เพื่อกำหนดประเภทของภาพเคลื่อนไหวการเปลี่ยนแปลง ค่าทางเลือกของแอตทริบิวต์มีดังนี้:
4. การเปลี่ยนแปลงล่าช้า
แอตทริบิวต์การเปลี่ยนแปลงความล่าช้าจะใช้ในการตั้งค่าเมื่อผลการเปลี่ยนแปลงเริ่มต้น รูปแบบไวยากรณ์ของแอตทริบิวต์จะเป็นดังนี้:
การเปลี่ยนแปลงล่าช้า: เวลา;
ในหมู่พวกเขา เวลาพารามิเตอร์ใช้เพื่อตั้งเวลารอก่อนที่เอฟเฟกต์การเปลี่ยนแปลงจะเริ่มขึ้น ในหน่วยวินาทีหรือมิลลิวินาที
5. การเปลี่ยนแปลง
คุณลักษณะการเปลี่ยนแปลงเป็นตัวย่อของคุณลักษณะทั้งสี่ข้างต้น สามารถตั้งค่าคุณลักษณะทั้งสี่ข้างต้นได้ในเวลาเดียวกัน
การเปลี่ยนแปลง: การเปลี่ยนแปลงคุณสมบัติการเปลี่ยนแปลงระยะเวลาการเปลี่ยนแปลงระยะเวลาฟังก์ชั่นการเปลี่ยนแปลงความล่าช้า;
ในแอตทริบิวต์การเปลี่ยนแปลง พารามิเตอร์ที่จำเป็นต้องมี transition-property และ transition-duration และ transition-timing-function และ transition-delay เป็นพารามิเตอร์ทางเลือก สามารถละเว้นได้หากไม่จำเป็น นอกจากนี้ ยังสามารถตั้งค่าเอฟเฟกต์การเปลี่ยนแปลงได้หลายกลุ่มผ่านแอตทริบิวต์การเปลี่ยนแปลง แต่ละกลุ่มจะถูกคั่นด้วยเครื่องหมายจุลภาค โค้ดตัวอย่างมีดังนี้: