เทคโนโลยีแอนิเมชั่น CSS3 ที่คุณต้องรู้ (3)

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-01-15 10:52:10

การเปลี่ยนแปลง

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

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

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

#nav a { สีพื้นหลัง: สีแดง }
#nav a:hover, #nav a:focus{
สีพื้นหลัง:สีฟ้า;
/* บอกให้การแปลงใช้กับคุณสมบัติสีพื้นหลัง (ดูเหมือนพารามิเตอร์ CSS ใช่ไหม #foreshadowing)*/
-webkit-การเปลี่ยนแปลงคุณสมบัติ:สีพื้นหลัง;
/* ปล่อยให้มันคงอยู่เป็นเวลาสองวินาที*/
-webkit-การเปลี่ยนแปลง-ระยะเวลา:2s;
-

พารามิเตอร์บางตัวที่จะแปลง

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

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

ระยะเวลาการเปลี่ยนแปลง

กำหนดเวลาที่ใช้ในการแปลง (เวลาที่ใช้ในการเปลี่ยนจากแอตทริบิวต์เก่าเป็นแอตทริบิวต์ใหม่)

ฟังก์ชันการเปลี่ยนเวลา

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

การเปลี่ยนแปลงล่าช้า

นี้จะเข้าใจง่ายกว่าคือเวลาหน่วงของการแปลง เวลาอาจเป็นจำนวนเต็มบวก จำนวนเต็มลบ หรือศูนย์ เมื่อไม่เป็นศูนย์ ต้องตั้งค่าหน่วยเป็น s (วินาที) หรือ ms (มิลลิวินาที) จุดเวลานั้น และการดำเนินการก่อนหน้าจะถูกตัดทอน
หมายเหตุ: ส่วนพารามิเตอร์ถูกเพิ่มระหว่างการแปล และไม่ได้อยู่ในข้อความต้นฉบับ

รองรับเบราว์เซอร์

เจ๋งพอ ๆ กับแอตทริบิวต์การแปลง แต่ปัจจุบันรองรับเฉพาะเบราว์เซอร์ WebKit เท่านั้น -moz-transition มีอยู่แล้วใน Firefox 3.7 เวอร์ชันล่าสุดที่สร้างทุกคืน คุณยังสามารถเพิ่ม -moz-transition ใน CSS ของคุณเพื่อการปรับปรุงในอนาคต คุณสามารถเพิ่มคุณสมบัติโดยไม่มีคำนำหน้าส่วนตัวได้ ในกรณีนี้

แอนิเมชั่น

แอนิเมชั่นคือจุดที่ CSS 3 มีประโยชน์มากที่สุด คุณสามารถรวมองค์ประกอบทั้งหมดที่เรากล่าวถึงข้างต้นเข้ากับคุณสมบัติแอนิเมชั่น เช่น แอนิเมชัน-ระยะเวลา ชื่อแอนิเมชั่น และแอนิเมชั่น-timing-ฟังก์ชัน เพื่อสร้างเอฟเฟกต์ เช่น แอนิเมชั่น Flash - CSS ล้วนๆ

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

#หมุน {
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 600px;
ความสูง: 400px;
/* ตรวจสอบให้แน่ใจว่าเราอยู่ในอวกาศ 3 มิติ*/
-webkit-transform-style: รักษา-3d;
/*ทำให้ทั้งแถวใช้การหมุนแกน x, แอนิเมชันใน 7 วินาที, การเล่นไม่สิ้นสุด และความเป็นเส้นตรง*/
-webkit-ชื่อแอนิเมชั่น: x-spin;
-webkit-ภาพเคลื่อนไหว-ระยะเวลา: 7s;
-webkit-animation-iteration-count: อนันต์;
-webkit-animation-timing-function: เชิงเส้น;
-
/* กำหนดภาพเคลื่อนไหวที่ต้องการเรียก*/
@ -webkit-keyframes x-หมุน {
0% { -webkit-แปลง: หมุนX(0deg); }
50% { -webkit-transform: หมุนX(180deg); }
100% { -webkit-แปลง: หมุนX(360deg); }
-

โค้ดภาพเคลื่อนไหว CSS ที่ยอดเยี่ยมและการสาธิตออนไลน์สามารถดูได้บนเว็บไซต์ webkit การสาธิตสามารถดูได้บนเว็บไซต์ใด ๆ แต่เอฟเฟกต์ภาพเคลื่อนไหวจะปรากฏเฉพาะใน WebKit เวอร์ชัน build ทุกคืน บน 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 มิติ