การเปลี่ยนแปลง
การเปลี่ยนแปลงขั้นพื้นฐานที่เกี่ยวข้องกับคุณสมบัติ CSS คือการกำหนดและย้ายองค์ประกอบจากสถานะพัก (เช่น พื้นหลังสีน้ำเงินเข้ม) ไปยังสถานะโฮเวอร์หรือใช้งานอยู่ (เช่น พื้นหลังสีน้ำเงินอ่อน)
การแปลงสามารถใช้ร่วมกับการแปลงได้ (เช่นเดียวกับการเพิ่มเหตุการณ์ เช่น :hover หรือ :focus) เพื่อสร้างภาพเคลื่อนไหว ทำให้สีพื้นหลังจางลง เลื่อนองค์ประกอบ และหมุนวัตถุทั้งหมดด้วยการเปลี่ยน CSS
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #nav a{ สีพื้นหลัง: สีแดง } |
พารามิเตอร์บางตัวที่จะแปลง
การเปลี่ยนแปลงคุณสมบัติ
ระบุชื่อคุณสมบัติ CSS สำหรับการแปลง ตัวอย่างเช่น ในตัวอย่างข้างต้น การแปลงจะถูกนำไปใช้กับคุณสมบัติสีพื้นหลัง
ระยะเวลาการเปลี่ยนแปลง
กำหนดเวลาที่ใช้ในการแปลง (เวลาที่ใช้ในการเปลี่ยนจากแอตทริบิวต์เก่าเป็นแอตทริบิวต์ใหม่)
ฟังก์ชั่นการเปลี่ยนเวลา
สามารถเข้าใจได้ว่าเป็นผลที่มากเกินไป ระบุค่ากลางระหว่างการแปลง สามารถระบุได้ด้วยลูกบาศก์เบซิเยร์ แน่นอนว่ามีค่าในตัวที่ใช้กันทั่วไปหลายประการ: ความสะดวกเชิงเส้น |
การเปลี่ยนแปลงล่าช้า
นี้จะเข้าใจง่ายกว่าคือเวลาหน่วงของการแปลง เวลาอาจเป็นจำนวนเต็มบวก จำนวนเต็มลบ หรือศูนย์ เมื่อไม่เป็นศูนย์ ต้องตั้งค่าหน่วยเป็น s (วินาที) หรือ ms (มิลลิวินาที) จุดเวลานั้น และการดำเนินการก่อนหน้าจะถูกตัดทอน
หมายเหตุ: ส่วนพารามิเตอร์ถูกเพิ่มระหว่างการแปล และไม่ได้อยู่ในข้อความต้นฉบับ
รองรับเบราว์เซอร์
เจ๋งพอ ๆ กับแอตทริบิวต์การแปลง แต่ปัจจุบันรองรับเฉพาะเบราว์เซอร์ WebKit เท่านั้น -moz-transition มีอยู่แล้วใน Firefox 3.7 เวอร์ชันล่าสุดที่สร้างทุกคืน คุณยังสามารถเพิ่ม -moz-transition ใน CSS ของคุณเพื่อการปรับปรุงในอนาคต คุณสามารถเพิ่มคุณสมบัติโดยไม่มีคำนำหน้าส่วนตัวได้ ในกรณีนี้
แอนิเมชั่น
แอนิเมชั่นคือจุดที่ CSS 3 มีประโยชน์มากที่สุด คุณสามารถรวมองค์ประกอบทั้งหมดที่เรากล่าวถึงข้างต้นเข้ากับคุณสมบัติแอนิเมชัน เช่น แอนิเมชั่น-ระยะเวลา ชื่อแอนิเมชั่น และแอนิเมชั่น-timing-ฟังก์ชัน เพื่อสร้างเอฟเฟกต์ เช่น แอนิเมชั่น Flash - CSS ล้วนๆ
ที่อยู่วิดีโอ: http://www.tudou.com/programs/view/YeTPctOy2mo
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #หมุน { |
โค้ดภาพเคลื่อนไหว CSS ที่ยอดเยี่ยมและการสาธิตออนไลน์สามารถดูได้บนเว็บไซต์ webkit การสาธิตสามารถดูได้บนเว็บไซต์ต่างๆ แต่เอฟเฟกต์ภาพเคลื่อนไหวจะปรากฏเฉพาะใน WebKit เวอร์ชันบิวด์ตอนกลางคืน บน Mac os (Snow Leopard) เท่านั้น ดูเหมือนในวิดีโอด้านบน และหากคุณใช้ mac os (เวอร์ชันเสือดาวหิมะ) ฉันคิดว่ามันคุ้มค่าที่จะติดตั้ง webkit เพื่อดูเอฟเฟกต์สำหรับตัวคุณเอง (มันเจ๋งมาก) ผู้ใช้ระบบ Windows ไม่สามารถรับรู้ผลกระทบนี้ได้ชั่วคราว
พารามิเตอร์บางส่วนของภาพเคลื่อนไหว
พารามิเตอร์ของแอนิเมชันค่อนข้างคล้ายกับพารามิเตอร์ของการแปล ดังนั้นหากคุณเข้าใจพารามิเตอร์ของการแปล ก็จะเข้าใจได้ไม่ยาก
ชื่อแอนิเมชั่น
ชื่อของภาพเคลื่อนไหว
ภาพเคลื่อนไหว-ระยะเวลา
กำหนดเวลาที่จำเป็นสำหรับการเล่นภาพเคลื่อนไหวหนึ่งครั้ง ค่าเริ่มต้นคือ 0;
ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว
กำหนดวิธีการเล่นภาพเคลื่อนไหว การตั้งค่าพารามิเตอร์จะคล้ายกับฟังก์ชันการเปลี่ยนเวลา
ภาพเคลื่อนไหวล่าช้า
กำหนดว่าภาพเคลื่อนไหวจะเริ่มต้นเมื่อใด
ภาพเคลื่อนไหวซ้ำนับ
กำหนดจำนวนลูป อนันต์หมายถึงไม่จำกัดครั้ง ค่าเริ่มต้นคือ 1
-webkit-นิเมชั่นทิศทาง
ทิศทางของการเล่นภาพเคลื่อนไหว สองค่า ค่าเริ่มต้นคือปกติ ในขณะนี้ แต่ละรอบของภาพเคลื่อนไหวจะเล่นไปข้างหน้า อีกค่าหนึ่งจะสลับกัน จากนั้นจะเล่นเวลาที่เป็นเลขคู่ไปข้างหน้า และเวลาที่เป็นเลขคี่จะเล่นในทิศทางตรงกันข้าม
รองรับเบราว์เซอร์
ขออภัย ปัจจุบันมีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับภาพเคลื่อนไหว CSS แอนิเมชัน 2D CSS ทำงานใน Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira และเบราว์เซอร์ Webkit อื่นๆ Safari 4 (Snow Leopard) รองรับภาพเคลื่อนไหว 3 มิติ