ยิ่งเราเข้าใกล้อินเทอร์เฟซที่เริ่มทำงานมากขึ้นเท่าใด ผู้ใช้ก็จะยิ่งเข้าใจได้ง่ายขึ้นเท่านั้น ในชีวิตนี้ แทบไม่มีอะไรเกิดขึ้นทันที - เมื่อเปิดกระป๋องโซดาหรือหลับตาก่อนเข้านอน เราจะสังเกตเห็นสภาวะตรงกลางต่างๆ มากมาย ไม่ใช่ "เปิด/ปิด" อย่างฉับพลันดังที่เกิดขึ้นบนเว็บ

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

ภาพเคลื่อนไหวคือชุดของคีย์เฟรมหรือคีย์เฟรมที่จัดเก็บไว้ใน CSS:

@keyframes ทดสอบภาพเคลื่อนไหว ( 0% ( กว้าง: 100px; ) 100% ( กว้าง: 200px; ) )

มาดูกันว่าเกิดอะไรขึ้นที่นี่ คีย์เวิร์ด @keyframes หมายถึงแอนิเมชั่นนั่นเอง จากนั้นชื่อของภาพเคลื่อนไหวมา ในกรณีของเรา การทดสอบภาพเคลื่อนไหว วงเล็บปีกกาประกอบด้วยรายการคีย์เฟรม เราใช้เฟรมเริ่มต้นที่ 0% และเฟรมสิ้นสุดที่ 100% (สามารถเขียนเป็นจากและถึงได้)
ลองดูโค้ดด้านล่างนี้ ภาพเคลื่อนไหวสามารถตั้งค่าได้ด้วยวิธีนี้:

@keyframes ทดสอบภาพเคลื่อนไหว ( จาก ( ความกว้าง: 0; ) 25% ( ความกว้าง: 75px; ) 75% ( ความกว้าง: 150px; ) ถึง ( ความกว้าง: 100%; ) )

โปรดจำไว้ว่า หากไม่ได้ระบุเฟรมเริ่มต้นหรือเฟรมสิ้นสุด เบราว์เซอร์จะตรวจจับเฟรมเหล่านั้นโดยอัตโนมัติราวกับว่าไม่มีการใช้ภาพเคลื่อนไหวกับเฟรมเหล่านั้น

คุณสามารถเชื่อมต่อภาพเคลื่อนไหวกับองค์ประกอบดังนี้:

ตัวเลือกองค์ประกอบ ( ชื่อภาพเคลื่อนไหว: ชื่อภาพเคลื่อนไหวของคุณ; ระยะเวลาภาพเคลื่อนไหว: 2.5 วินาที; )

คุณสมบัติชื่อภาพเคลื่อนไหวระบุชื่อของภาพเคลื่อนไหว @keyframes กฎระยะเวลาภาพเคลื่อนไหวระบุระยะเวลาของภาพเคลื่อนไหวเป็นวินาที (1 วินาที, 30 วินาที, .5 วินาที) หรือมิลลิวินาที (600ms, 2500ms)

คุณยังสามารถจัดกลุ่มคีย์เฟรมได้:

@keyframes ทดสอบภาพเคลื่อนไหว ( 0%, 35% ( กว้าง: 50px; ) 75% ( กว้าง: 200px; ) 100% ( กว้าง: 100%; ) )

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

ตัวเลือกองค์ประกอบ ( ชื่อภาพเคลื่อนไหว: anim-name-1, anim-name-2; ระยะเวลาของภาพเคลื่อนไหว: 1s, 3s; )

ความล่าช้าของภาพเคลื่อนไหว:

คุณสมบัติความล่าช้าของภาพเคลื่อนไหวระบุความล่าช้าก่อนที่จะเล่นภาพเคลื่อนไหวในหน่วยวินาทีหรือมิลลิวินาที:

ตัวเลือกองค์ประกอบ ( Animation-name: anim-name-1; Animation-duration: 3s; Animation-Delay: 2s; /* 2 วินาทีจะหายไปก่อนที่แอนิเมชั่นจะเริ่ม */ )

เล่นซ้ำภาพเคลื่อนไหว:

การใช้ Animation-iteration-count ทำให้เราสามารถระบุจำนวนครั้งที่ภาพเคลื่อนไหวจะทำซ้ำได้ เช่น 0, 1, 2, 3 เป็นต้น หรือไม่มีที่สิ้นสุดสำหรับการวนซ้ำ:

ตัวเลือกองค์ประกอบ ( ชื่อภาพเคลื่อนไหว: anim-name-1; ระยะเวลาของภาพเคลื่อนไหว: 3 วินาที; ความล่าช้าของภาพเคลื่อนไหว: 4 วินาที; จำนวนการวนซ้ำของภาพเคลื่อนไหว: 5; /* ภาพเคลื่อนไหวเล่น 5 ครั้ง */ )

สถานะองค์ประกอบก่อนและหลังภาพเคลื่อนไหว:

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

แอนิเมชั่นเติมโหมด: ส่งต่อ;- องค์ประกอบภาพเคลื่อนไหวจะอยู่ในสถานะคีย์เฟรมสุดท้ายหลังจากเสร็จสิ้น/เล่น

ก นิเมชั่นเติมโหมด: ถอยหลัง;- องค์ประกอบจะอยู่ในสถานะของคีย์เฟรมแรก

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

เริ่มและหยุดภาพเคลื่อนไหว:

นี่เป็นความรับผิดชอบของคุณสมบัติ Animation-play-state ซึ่งอาจมีค่าสองค่า: ทำงานหรือหยุดชั่วคราว

Element-selector:hover ( สถานะการเล่นภาพเคลื่อนไหว: หยุดชั่วคราว; )

ทิศทางของแอนิเมชัน:

คุณสมบัติทิศทางภาพเคลื่อนไหวระบุวิธีการควบคุมทิศทางในการเล่นภาพเคลื่อนไหว นี่คือค่าที่เป็นไปได้:

ทิศทางแอนิเมชั่น: ปกติ; - เล่นแอนิเมชั่นตามลำดับโดยตรง

ทิศทางแอนิเมชั่น: ย้อนกลับ; - ภาพเคลื่อนไหวจะเล่นในลำดับย้อนกลับจากไปเป็นจาก

ทิศทางแอนิเมชั่น: สลับ;- แม้แต่การทำซ้ำแอนิเมชั่นก็ยังเล่นในลำดับย้อนกลับหรือคี่ - ในลำดับไปข้างหน้า

ทิศทางแอนิเมชั่น: สลับย้อนกลับ; - การทำซ้ำแอนิเมชั่นแปลก ๆ จะถูกเล่นในลำดับย้อนกลับ แม้กระทั่งการซ้ำกัน - ในลำดับไปข้างหน้า

ฟังก์ชั่นของเอาต์พุตเฟรมภาพเคลื่อนไหวที่ราบรื่น:

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

อย่างไรก็ตาม คุณสามารถสร้างฟังก์ชันดังกล่าวได้ด้วยตัวเอง ความหมาย ฟังก์ชั่นจับเวลาภาพเคลื่อนไหว: ลูกบาศก์เบซิเยร์ (P1x, P1y, P2x, P2y); รับ 4 อาร์กิวเมนต์เป็นอินพุตและสร้างเส้นโค้งการกระจายสำหรับกระบวนการแอนิเมชั่น

คุณสามารถศึกษารายละเอียดเพิ่มเติมหรือทดลองสร้างฟังก์ชันเหล่านี้ได้บนเว็บไซต์ http://cubic-bezier.com

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

ตัวเลือกองค์ประกอบ ( ชื่อภาพเคลื่อนไหว: anim-name-1; ระยะเวลาของภาพเคลื่อนไหว: 3 วินาที; ความล่าช้าของภาพเคลื่อนไหว: 5 วินาที; จำนวนการวนซ้ำของภาพเคลื่อนไหว: 3; ฟังก์ชั่นการกำหนดเวลาของภาพเคลื่อนไหว: ขั้นตอน (5, สิ้นสุด); )

การสนับสนุนเบราว์เซอร์สำหรับภาพเคลื่อนไหว:

ค่าในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้อย่างสมบูรณ์

ค่าที่มี -webkit-, -moz- หรือ -O- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า

บนเว็บไซต์ https://www.w3schools.com คุณสามารถศึกษาภาพเคลื่อนไหว CSS โดยละเอียดได้ (พร้อมตัวอย่าง)
หนึ่งในไลบรารียอดนิยมสำหรับการทำงานกับแอนิเมชั่นคือ animate.css.

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

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

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

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

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

พื้นฐานการสร้าง

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

เอฟเฟกต์การเปลี่ยนแปลงนั้นถูกสร้างขึ้นโดยใช้ @keyframes

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

ดังนั้น ก่อนอื่น เราต้องอธิบายการเปลี่ยนแปลงที่จำเป็นใน @keyframes ก่อน เรามาดูรายละเอียดวิธีการทำงานร่วมกับการเปลี่ยนแปลงเหล่านั้นกันดีกว่า

@keyframes ไวยากรณ์

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

@keyframes พัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;)) 100% (ขนาดตัวอักษร: 50px;))

@คีย์เฟรมพัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;))

ดังนั้น หลังจากคีย์เวิร์ด @keyframes จะมีคำที่กำหนดเองซึ่งจะทำหน้าที่เป็นชื่อของภาพเคลื่อนไหว ในกรณีของเราคือ "ชีพจร" จากนั้นเปิดเครื่องหมายปีกกาซึ่งเขียนกฎที่จำเป็น

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

คำสำคัญจากและถึงสามารถแทนที่รายการเปอร์เซ็นต์ โดยระบุ 0% และ 100% ตามลำดับ นั่นคือจุดเริ่มต้นและจุดสิ้นสุดของการเล่น

นำแอนิเมชั่นไปสู่การปฏิบัติ

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

เลือกองค์ประกอบที่จะใช้

เชื่อมโยงกับกฎที่อธิบายผ่าน @keyframes (ผ่านชื่อ) และตั้งค่าด้วย การตั้งค่าเพิ่มเติมในกรณีที่จำเป็น.

มาลองกัน

ในไฟล์ html ของฉัน ฉันสร้างบล็อกที่มีคลาส shadow ซึ่งมีบรรทัดข้อความธรรมดา เป้าหมายของเราคือการใช้เอฟเฟกต์ภาพเคลื่อนไหวที่เราอธิบายไว้ก่อนหน้านี้ องค์ประกอบข้อความ.

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

ดังนั้น นอกเหนือจากสไตล์ที่บล็อกของเรามีอยู่แล้ว เรายังเพิ่มสไตล์ใหม่อีกด้วย:

ชื่อแอนิเมชัน: ชีพจร; ภาพเคลื่อนไหว-ระยะเวลา: 2s;

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

แอนิเมชั่นที่ไม่มีที่สิ้นสุดใน CSS3

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

ภาพเคลื่อนไหวซ้ำนับ: อนันต์;

แอนิเมชั่น - การวนซ้ำ - นับ : อนันต์ ;

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

ล่าช้าก่อนเริ่ม

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

ทิศทาง

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

@keyframes พัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;) 70% (ขนาดตัวอักษร: 80px;) 100% (ขนาดตัวอักษร: 50px;))

@คีย์เฟรมพัลส์ ( 0% (ขนาดตัวอักษร: 50px;) 50% (ขนาดตัวอักษร: 60px;) 70% (ขนาดตัวอักษร: 80px;) 100% (ขนาดตัวอักษร: 50px;))

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

ข้าว. 2. ขนาดข้อความต้นฉบับ

ข้าว. 3. ขนาดตัวอักษรเกือบจะอยู่ที่ส่วนท้ายของภาพเคลื่อนไหว ก่อนที่จะกลับสู่สถานะเดิมทันที

ตอนนี้เราถาม:

ทิศทางแอนิเมชั่น: ย้อนกลับ;

แอนิเมชั่น - ทิศทาง : ย้อนกลับ ;

ทุกอย่างกลับหัวกลับหาง ขั้นแรก ข้อความจะเพิ่มขึ้นมากถึง 30 พิกเซล สูงสุด 80 และสำหรับภาพเคลื่อนไหวที่เหลือ ข้อความจะค่อยๆ ลดลง และกลับสู่ขนาดเดิมในที่สุด มันง่ายมาก

แบบฟอร์มแอนิเมชั่น

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

สวัสดีเพื่อนๆ! วันนี้เราจะดูหัวข้อที่น่าสนใจมาก - การสร้างภาพเคลื่อนไหว CSS โดยใช้ตัวอย่างจริง จุดสุดยอดของบทช่วยสอนนี้คือการสร้างภาพเคลื่อนไหว CSS ที่สวยงามของโลโก้ Million Dollar

เย็น

ตะกุกตะกัก

สื่อการสอน

• ที่มา: ดาวน์โหลด
• ตัวอย่างพื้นฐานจากบทเรียน: https://codepen.io/agragregra/pen/PKNavm
• เริ่มต้นเทมเพลตจากบทเรียน: https://github.com/agragregra/optimizedhtml-start-template

ทฤษฎีเล็กน้อย

ก่อนที่คุณจะเริ่มสร้างตัวอย่างภาพเคลื่อนไหว คุณควรศึกษาข้อมูลพื้นฐานก่อน ภาพเคลื่อนไหว CSSให้พิจารณาข้อกำหนดพื้นฐาน คุณสมบัติ และกฎเกณฑ์ การสร้างซีเอสเอสภาพเคลื่อนไหว

หากคุณมีประสบการณ์ในการสร้างแอนิเมชั่นในแอพพลิเคชั่นใดๆ มาก่อน เช่น Adobe After Effects หรือ Flash Professional รุ่นเก่า (ตอนนี้ อะโดบี ภาพเคลื่อนไหว) จากนั้นคุณควรทำความคุ้นเคยกับแนวคิดเช่น "คีย์เฟรม", "ฟังก์ชันชั่วคราวหรือไดนามิกของการเคลื่อนไหว" ซึ่งเช่นเดียวกับในด้านอื่น ๆ ของแอนิเมชั่น นำไปใช้กับแอนิเมชั่นขององค์ประกอบบนเพจโดยใช้ CSS อย่างไรก็ตาม ไม่เหมือนกับการทำงานกับอินเทอร์เฟซแอปพลิเคชัน คุณสร้างภาพเคลื่อนไหว CSS ของคุณโดยการเขียนโค้ดในโปรแกรมแก้ไข

กฎ CSS @keyframes

การสร้างภาพเคลื่อนไหว CSS เริ่มต้นด้วยการประกาศชื่อของภาพเคลื่อนไหวในบล็อก @คีย์เฟรมและกำหนดสิ่งที่เรียกว่าขั้นตอนแอนิเมชันหรือคีย์เฟรม

ในการทบทวนทฤษฎีและพื้นฐาน เราจะใช้ CSS ล้วนๆ และในภายหลัง เราจะใช้ตัวประมวลผลล่วงหน้า Sass โดยใช้ตัวอย่างที่ซับซ้อนมากขึ้น คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Sass ได้ในบทเรียน นอกจากนี้ เพื่อความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับพื้นฐานของ CSS ฉันขอแนะนำให้อ่านบทเรียน “พื้นฐาน CSS - คู่มือสำหรับเด็กเล็ก” และ “ตัวเลือก CSS ทั้งหมดในบทเรียนเดียว”

มาดูโครงสร้าง @keyframes และการทำงานกับคีย์เฟรมกัน ตัวอย่างง่ายๆ:

@keyframes การหมุน ( 0% ( รัศมีเส้นขอบ: 0 0 0 0; การแปลง: หมุน (0deg); ) 25% ( รัศมีเส้นขอบ: 50% 0 0 0; การแปลง: หมุน (45deg); ) 50% ( เส้นขอบ- รัศมี: 50% 50% 0 0; การแปลง: หมุน (90deg); ) 75% ( รัศมีเส้นขอบ: 50% 50% 50% 0; การแปลง: หมุน (135deg); ) 100% ( รัศมีเส้นขอบ: 50% 50 % 50% 50% การแปลง: หมุน (180deg); ) )

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

หลังจากการประกาศ เครื่องหมายปีกกาจะเปิดขึ้น (ใน ในตัวอย่างนี้บน CSS บริสุทธิ์) ซึ่งคุณสมบัติจะถูกเขียนตามลำดับตั้งแต่ 0% ถึง 100% สำหรับแต่ละคีย์เฟรม โปรดทราบว่าระหว่าง 0% ถึง 100% คุณสามารถแทรกค่ากลางได้มากเท่าที่คุณต้องการ ไม่ว่าจะเป็น 50%, 75% หรือ 83% ซึ่งคล้ายกับไทม์ไลน์ของแอปพลิเคชันแอนิเมชันมาก ซึ่งคุณสามารถเพิ่มสถานะระหว่างกลางระหว่างสองสถานะได้

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

การเข้าถึงบล็อกของคีย์เฟรม

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

Div ( กว้าง: 120px; ความสูง: 120px; สีพื้นหลัง: สีม่วง; ระยะขอบ: 100px; ภาพเคลื่อนไหว: หมุน 2 วินาทีค่อยๆ คลายออก 1 วินาทีสลับกันอย่างไม่มีที่สิ้นสุด; )

ไม่มีอะไรพิเศษจนกระทั่งบรรทัดสุดท้าย ที่นี่เราจะกำหนดว่าวัตถุจะมีลักษณะอย่างไรในตอนแรก และในบรรทัดสุดท้ายของบล็อก เราอ้างถึงบล็อกของคีย์เฟรมที่เรียกว่า "การกลึง":

แอนิเมชัน: การเปลี่ยน 2s คลายออก 1s สลับไม่มีที่สิ้นสุด;

หากทุกอย่างชัดเจนกับคำจำกัดความของคีย์เฟรม บรรทัดนี้จำเป็นต้องมีคำอธิบายทันที อย่างที่เราเห็นมาก่อน คุณสมบัติซีเอสเอส"แอนิเมชั่น" นี่เป็นรูปแบบชวเลข เช่น คุณสมบัติ “margin: 20px 30px 40px 50px” ซึ่งสามารถแบ่งออกเป็นคุณสมบัติต่างๆ แยกกันได้:

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

ชื่อแอนิเมชั่น	ชื่อของภาพเคลื่อนไหวที่เข้าถึงได้จาก @keyframes
ภาพเคลื่อนไหว-ระยะเวลา	ระยะเวลาหรือระยะเวลาในการดำเนินการภาพเคลื่อนไหว CSS สามารถระบุเป็นวินาที (s) หรือมิลลิวินาที (ms)
ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว	ฟังก์ชันชั่วคราว พลวัตของการเคลื่อนที่ของวัตถุ หรือการเปลี่ยนแปลงคุณสมบัติ ( ผ่อนปรน- (ตามค่าเริ่มต้น) แอนิเมชั่นเริ่มช้า เร่งและสิ้นสุดอย่างช้าๆ เชิงเส้น- แอนิเมชั่นเกิดขึ้นอย่างเท่าเทียมกัน ความสะดวกใน- เริ่มต้นอย่างช้าๆ และเร่งความเร็วจนถึงคีย์เฟรมสุดท้าย คลายออก- เริ่มต้นอย่างรวดเร็วและช้าลงอย่างราบรื่นในตอนท้าย สะดวกในการเข้าออก- เริ่มต้นอย่างช้าๆ และจบลงอย่างช้าๆ)
ภาพเคลื่อนไหวล่าช้า	เวลาหน่วงของภาพเคลื่อนไหวก่อนที่จะเริ่ม ระบุเป็นวินาทีหรือมิลลิวินาทีด้วย
ภาพเคลื่อนไหวซ้ำนับ	จำนวนการทำซ้ำ (การวนซ้ำ) ของแอนิเมชั่น ( ไม่มีที่สิ้นสุด- อนันต์หรือระบุตัวเลขธรรมดาโดยไม่มีหน่วยก็ได้)
ทิศทางภาพเคลื่อนไหว	ทิศทางของแอนิเมชั่น ตามลำดับ ย้อนกลับหรือกลับไปกลับมา ( ปกติ- (ตามค่าเริ่มต้น) แอนิเมชั่นจะเล่นตั้งแต่ต้นจนจบและหยุด สลับกัน- เล่นตั้งแต่ต้นจนจบและไปในทิศทางตรงกันข้าม สลับย้อนกลับ- เล่นตั้งแต่ต้นจนจบและย้อนกลับ; ย้อนกลับ- แอนิเมชั่นจะเล่นตั้งแต่ตอนท้าย)
สถานะการเล่นภาพเคลื่อนไหว	การควบคุมการเล่นภาพเคลื่อนไหว ( หยุดชั่วคราว(หยุดชั่วคราว), วิ่ง(เปิดตัว) ฯลฯ) สามารถใช้กับ on:hover หรือจากฟังก์ชัน JS ได้ หากจำเป็น
แอนิเมชั่นเติมโหมด	สถานะขององค์ประกอบก่อนและหลังการเล่นภาพเคลื่อนไหว ตัวอย่างเช่น ค่า ถอยหลังช่วยให้คุณสามารถคืนคุณสมบัติทั้งหมดกลับสู่สถานะดั้งเดิมได้ทันทีหลังจากใช้แอนิเมชั่น

บ่อยครั้งที่นักพัฒนาที่มีประสบการณ์ไม่ได้เขียนคุณสมบัติเหล่านี้ทั้งหมดแยกกัน แต่ใช้สัญลักษณ์สั้น ๆ และโครงสร้างของมันมีดังนี้:

แอนิเมชั่น: (1. ชื่อแอนิเมชั่น - ชื่อ) (2. ระยะเวลาแอนิเมชั่น - ระยะเวลา) (3. แอนิเมชั่น-เวลา-ฟังก์ชันไดนามิกของการเคลื่อนไหว) (4. แอนิเมชั่น-ดีเลย์ - หยุดชั่วคราวก่อนเริ่ม) (5. แอนิเมชั่น-วนซ้ำ- นับ - จำนวนการดำเนินการ) (6. ทิศทางแอนิเมชั่น - ทิศทาง)

แอนิเมชัน: แอนิเมชันชื่อ 2s เชิงเส้น 1s การย้อนกลับแบบไม่มีที่สิ้นสุด

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

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

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

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

1. คุณสมบัติพื้นฐานของภาพเคลื่อนไหว CSS3

บล็อกทางทฤษฎีขนาดเล็กที่คุณจะเข้าใจว่าคุณสมบัติ CSS3 ใดที่รับผิดชอบภาพเคลื่อนไหวรวมถึงค่าใดบ้างที่สามารถรับได้

• ชื่อแอนิเมชั่น— ชื่อเฉพาะสำหรับแอนิเมชั่น (เราจะพูดถึงคีย์เฟรมด้านล่าง)
• ภาพเคลื่อนไหว-ระยะเวลา— ระยะเวลาของแอนิเมชันเป็นวินาที
• ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว— เส้นโค้งการเปลี่ยนแปลงความเร็วของแอนิเมชั่น เมื่อมองแวบแรกมันไม่ชัดเจนมาก การแสดงตัวอย่างจะง่ายกว่าเสมอและคุณจะเห็นด้านล่าง สามารถรับค่าต่อไปนี้: linear | ง่าย | ความสะดวกใน | ผ่อนผัน | ลูกบาศก์เบซิเยร์(n,n,n,n) .
• ภาพเคลื่อนไหวล่าช้า— ดีเลย์เป็นวินาทีก่อนที่แอนิเมชั่นจะเริ่ม
• ภาพเคลื่อนไหวซ้ำนับ- จำนวนการทำซ้ำแอนิเมชั่น สามารถระบุเป็นตัวเลขหรือระบุไม่มีที่สิ้นสุดแล้วแอนิเมชั่นจะทำงานอย่างไม่มีที่สิ้นสุด

นี่เป็นเพียงคุณสมบัติพื้นฐานที่เพียงพอสำหรับการสร้างภาพเคลื่อนไหว CSS3 แรกของคุณ

สิ่งสุดท้ายที่เราต้องรู้และเข้าใจจากทฤษฎีคือวิธีสร้างคีย์เฟรม นอกจากนี้ยังทำได้ง่ายและทำได้โดยใช้กฎ @keyframes ซึ่งมีการระบุคีย์เฟรมอยู่ภายใน ไวยากรณ์สำหรับกฎนี้เป็นดังนี้:

ด้านบนเราตั้งค่าเฟรมแรกและเฟรมสุดท้าย สถานะระดับกลางทั้งหมดจะถูกคำนวณโดยอัตโนมัติ!

2. ตัวอย่างภาพเคลื่อนไหว CSS3 จริง

ตามปกติทฤษฎีนี้น่าเบื่อและไม่ชัดเจนเสมอไป การดูทุกอย่างโดยใช้ตัวอย่างจริงนั้นง่ายกว่ามาก แต่วิธีที่ดีที่สุดคือทำเองในหน้าทดสอบ HTML

เมื่อเรียนภาษาการเขียนโปรแกรม คุณมักจะเขียนโปรแกรม “Hello, world!” ซึ่งคุณสามารถเข้าใจไวยากรณ์ของภาษานี้และสิ่งพื้นฐานอื่นๆ ได้ แต่เราไม่ได้เรียนภาษาการเขียนโปรแกรม แต่เป็นภาษาคำอธิบาย รูปร่างเอกสาร. ดังนั้น เราก็จะมีคำว่า “สวัสดีชาวโลก!” ของเราเอง

นี่คือสิ่งที่เราจะทำเช่น:ขอให้เรามีบล็อกบ้าง