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

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

ดังนั้นช่วงการเปลี่ยนภาพใน CSS จึงเป็น เฉพาะเจาะจงตามประเภทของแอนิเมชั่น โดยที่:

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

แต่ถ้าคุณต้องการ:

มีการควบคุมมากกว่า ระดับกลางรัฐ?
วนรอบแอนิเมชั่น?
ทำแอนิเมชั่นประเภทต่างๆ สำหรับ หนึ่งรายการ?
เคลื่อนไหวคุณสมบัติเฉพาะบน .เท่านั้น ครึ่งหนึ่งของทาง?
เลียนแบบ ฟังก์ชั่นเวลาต่างๆสำหรับคุณสมบัติที่แตกต่างกัน?

แอนิเมชั่นใน CSS ช่วยให้ทำทั้งหมดนี้และอื่น ๆ ได้

แอนิเมชั่นเป็นเหมือนหนังสั้นที่คุณในฐานะผู้กำกับจะให้คำแนะนำ (กฎของสไตล์) แก่นักแสดงของคุณ (องค์ประกอบ HTML) สำหรับฉากต่างๆ (คีย์เฟรม)

คุณสมบัติแอนิเมชั่น

เช่นเดียวกับการเปลี่ยน คุณสมบัติแอนิเมชั่นคือ ตัวย่อสำหรับคนอื่น ๆ สองสาม:

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

ตัวอย่างด่วน

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

@keyframes ตีกลับ (0% (ล่าง: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5);) 100% (ด้านล่าง: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0.1);)) .loading-button (แอนิเมชั่น: เด้ง 0.5s ลูกบาศก์เบซิเยร์ (0.1,0.25,0.1,1) 0s อนันต์สลับกันทั้งคู่;)

ขั้นแรก คุณต้องเขียนแอนิเมชั่นการตีกลับของจริงโดยใช้ @keyframes และตั้งชื่อมัน

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

ชื่อภาพเคลื่อนไหว: ตีกลับ (ตรงกับชื่อคีย์เฟรม)
ภาพเคลื่อนไหว-ระยะเวลา: 0.5 วินาที (ครึ่งวินาที)
แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน: คิวบิก-เบซิเยร์ (0.1,0.25,0.1,1)
แอนิเมชั่น-ดีเลย์: 0 วินาที (ไม่มีดีเลย์)
animation-iteration-count: อนันต์ (เล่นซ้ำได้ไม่สิ้นสุด)
แอนิเมชั่น-ทิศทาง: ทางเลือก (กลับไปกลับมา)
แอนิเมชั่นเติมโหมด: both

@คีย์เฟรม

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

0% - ขั้นตอนแรกของแอนิเมชั่น
50% เป็นขั้นตอนครึ่งทางในแอนิเมชั่น
100% เป็นขั้นตอนสุดท้าย

คุณยังสามารถใช้คำหลักจาก และ ถึง แทน 0% และ 100% ตามลำดับ

คุณสามารถกำหนดคีย์เฟรมได้มากเท่าที่ต้องการ เช่น 33%, 4% หรือแม้แต่ 29.86% ในทางปฏิบัติ คุณจะเขียนเพียงไม่กี่ข้อเท่านั้น

แต่ละคีย์เฟรมคือ กฎ CSSซึ่งหมายความว่าคุณสามารถเขียนคุณสมบัติ CSS ได้ตามปกติ

ในการกำหนดแอนิเมชั่น เพียงเขียนคีย์เวิร์ด @keyframes ด้วย its ชื่อ:

@keyframes รอบ ๆ (0% (ซ้าย: 0; บน: 0;) 25% (ซ้าย: 240px; บน: 0;) 50% (ซ้าย: 240px; บน: 140px;) 75% (ซ้าย: 0; บนสุด: 140px ;) 100% (ซ้าย: 0; บน: 0;)) p (แอนิเมชั่น: ประมาณ 4s เชิงเส้นไม่มีที่สิ้นสุด;)

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

แอนิเมชั่น-ชื่อ

ชื่อแอนิเมชั่นถูกใช้อย่างน้อย สองครั้ง:

ที่ การเขียนแอนิเมชั่นด้วย @keframes;
ที่ โดยใช้แอนิเมชั่นโดยใช้คุณสมบัติชื่อแอนิเมชั่น (หรือคุณสมบัติแอนิเมชั่นชวเลข)

@keyframes อะไรก็ได้ (/ * ... * /) .selector (ชื่อภาพเคลื่อนไหว: อะไรก็ตาม;)

เช่นเดียวกับชื่อคลาส CSS ชื่อแอนิเมชั่นสามารถรวมได้เฉพาะ:

ตัวอักษร (a-z);
ตัวเลข (0-9);
ขีดล่าง (_);
ยัติภังค์ (-)

ชื่อต้องไม่ขึ้นต้นด้วยตัวเลขหรือยัติภังค์สองตัว

แอนิเมชั่น-duration

เช่นเดียวกับระยะเวลาการเปลี่ยน ระยะเวลาภาพเคลื่อนไหวสามารถตั้งค่าเป็น วินาที(1s) หรือ มิลลิวินาที(200ms).

ตัวเลือก (แอนิเมชั่น-ระยะเวลา: 0.5s;)

ค่าเริ่มต้นคือ 0 วินาที ซึ่งหมายความว่าไม่มีภาพเคลื่อนไหวเลย

แอนิเมชั่น-จับเวลา-ฟังก์ชั่น

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

ตัวเลือก (ฟังก์ชั่นการกำหนดเวลาภาพเคลื่อนไหว: ง่ายเข้า - ออก;)

ค่าเริ่มต้นคือความง่าย

เนื่องจากภาพเคลื่อนไหว CSS ใช้คีย์เฟรม คุณจึงตั้งค่าได้ เชิงเส้นหน้าที่ของเวลาและ จำลองเส้นโค้ง Bezier เฉพาะโดยการกำหนด เฉพาะเจาะจงมากคีย์เฟรม ดูที่ Bounce.js สำหรับแอนิเมชั่นสุดล้ำ

แอนิเมชั่น-ล่าช้า

เช่นเดียวกับการหน่วงเวลาการเปลี่ยนภาพ สามารถตั้งค่าการหน่วงเวลาของภาพเคลื่อนไหวเป็น วินาที(1s) หรือ มิลลิวินาที(200ms).

ค่าเริ่มต้นคือ 0 วินาที ซึ่งหมายความว่าไม่มีการหน่วงเวลา

มีประโยชน์เมื่อรวมแอนิเมชั่นหลายตัวใน ชุด.

A, .b, .c (ภาพเคลื่อนไหว: เด้ง 1 วินาที;) .b (ภาพเคลื่อนไหว-ล่าช้า: 0.25 วินาที;) .c (ภาพเคลื่อนไหว-ล่าช้า: 0.5 วินาที;)

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

โดยค่าเริ่มต้น แอนิเมชั่นจะเล่นเท่านั้น ครั้งหนึ่ง(ค่า 1). คุณสามารถตั้งค่าสามประเภท:

จำนวนเต็ม เช่น 2 หรือ 3;
ตัวเลขเศษส่วนเช่น 0.5 ซึ่งจะเล่นเพียงครึ่งเดียวของแอนิเมชั่น
คำหลักที่ไม่มีที่สิ้นสุดซึ่งจะทำซ้ำภาพเคลื่อนไหวอย่างไม่มีกำหนด

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

แอนิเมชั่น-ทิศทาง

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

ปกติ: เริ่มต้นที่ 0% สิ้นสุดที่ 100% เริ่มที่ 0% อีกครั้ง
ย้อนกลับ: เริ่มต้นที่ 100% สิ้นสุดที่ 0% เริ่มที่ 100% อีกครั้ง
ทางเลือก: เริ่มต้นที่ 0% ไปที่ 100% กลับไปที่ 0%
สลับกันย้อนกลับ: เริ่มต้นที่ 100% ไปที่ 0% กลับไปที่ 100%

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

แอนิเมชั่นเติมโหมด

คุณสมบัติโหมดเติมแอนิเมชั่นกำหนดสิ่งที่เกิดขึ้น ด้านหน้าจุดเริ่มต้นของแอนิเมชั่นและ หลังจากมันเสร็จสิ้น

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

โหมดเติมภาพเคลื่อนไหวช่วยให้คุณบอกเบราว์เซอร์ได้ถ้า สไตล์แอนิเมชั่น อีกด้วยควรสมัคร นอกแอนิเมชั่น.

ลองนึกภาพ ปุ่ม, ซึ่งเป็น:

สีแดงค่าเริ่มต้น;
กลายเป็น สีฟ้าที่จุดเริ่มต้นของแอนิเมชั่น
และในที่สุด เขียวเมื่ออนิเมชั่นเสร็จ

ปรับปรุงล่าสุด: 06.11.2016

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

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

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

โดยทั่วไป การประกาศคีย์เฟรม CSS3 มีรูปแบบต่อไปนี้:

@keyframes animation_name (จาก (/ * ค่าคุณสมบัติ CSS เริ่มต้น * /) ถึง (/ * ค่าคุณสมบัติ CSS สุดท้าย * /))

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

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

แอนิเมชั่นใน CSS3

ในกรณีนี้ แอนิเมชั่นจะเรียกว่า backgroundColorAnimation แอนิเมชั่นสามารถมีชื่อได้ตามต้องการ

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

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

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

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

@keyframes backgroundColorAnimation (จาก (background-color: red;) ถึง (background-color: blue;)) div (width: 100px; ความสูง: 100px; ระยะขอบ: 40px 30px; border: 1px solid # 333; background-color: # ccc;) div: เลื่อน (ชื่อภาพเคลื่อนไหว: backgroundColorAnimation; ภาพเคลื่อนไหว-ระยะเวลา: 2s;)

หลายคีย์เฟรม

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

@keyframes backgroundColorAnimation (จาก (สีพื้นหลัง: สีแดง;) 25% (สีพื้นหลัง: สีเหลือง;) 50% (สีพื้นหลัง: สีเขียว;) 75% (สีพื้นหลัง: สีน้ำเงิน;) ถึง (สีพื้นหลัง: สีม่วง ;))

ในกรณีนี้ ภาพเคลื่อนไหวจะเริ่มต้นด้วยสีแดง หลังจาก 25% ของเวลาแอนิเมชั่น สีจะเปลี่ยนเป็นสีเหลือง หลังจากนั้นอีก 25% เป็นสีเขียว และอื่นๆ

คุณยังสามารถทำให้พร็อพเพอร์ตี้หลายรายการเคลื่อนไหวในคีย์เฟรมเดียวได้พร้อมกัน:

@keyframes backgroundColorAnimation (จาก (background-color: red; opacity: 0.2;) ถึง (background-color: blue; opacity: 0.9;))

คุณยังสามารถกำหนดแอนิเมชั่นแยกกันได้หลายแอนิเมชั่น แต่นำมารวมกัน:

@keyframes backgroundColorAnimation (จาก (สีพื้นหลัง: สีแดง;) ถึง (สีพื้นหลัง: สีน้ำเงิน;)) @keyframes opacityAnimation (จาก (ความทึบ: 0.2;) ถึง (ความทึบ: 0.9;)) div (ความกว้าง: 100px ความสูง: 100px; ระยะขอบ: 40px 30px; เส้นขอบ: 1px ทึบ # 333; สีพื้นหลัง: #ccc; ชื่อแอนิเมชั่น: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 3s;)

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

จบแอนิเมชั่น

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

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

แอนิเมชั่น-วนซ้ำ-นับ: 3;

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

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

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

ชื่อแอนิเมชั่น: backgroundColorAnimation, opacityAnimation; ภาพเคลื่อนไหว-ระยะเวลา: 2s, 2s; แอนิเมชั่น-วนซ้ำ-นับ: 3; แอนิเมชั่น-ทิศทาง: ทางเลือก;

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

ชื่อแอนิเมชั่น: backgroundColorAnimation; แอนิเมชั่น-duration: 2s; แอนิเมชั่น-วนซ้ำ-นับ: 3; แอนิเมชั่น-ทิศทาง: ทางเลือก; แอนิเมชั่นเติมโหมด: ส่งต่อ;

ภาพเคลื่อนไหวล่าช้า

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

ชื่อแอนิเมชั่น: backgroundColorAnimation; แอนิเมชั่น-duration: 5s; ภาพเคลื่อนไหวล่าช้า: 1s; / * หน่วงเวลา 1 วินาที * /

ฟังก์ชันความราบรื่นของแอนิเมชัน

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

เชิงเส้น: ฟังก์ชันความเรียบเชิงเส้น คุณสมบัติเปลี่ยนแปลงอย่างสม่ำเสมอตลอดเวลา

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

ความสะดวกใน: ฟังก์ชันผ่อนแรงที่เร่งเมื่อออกตัวเท่านั้น

ผ่อนออก: ฟังก์ชันผ่อนผันที่เร่งเมื่อออกตัวเท่านั้น

การเข้า-ออก: ฟังก์ชัน Ease-in ที่เร่งความเร็วแอนิเมชั่นไปทางตรงกลางและช้าลงในตอนท้าย ทำให้เกิดการเปลี่ยนแปลงที่เป็นธรรมชาติมากขึ้น

cubic-bezier - ใช้ฟังก์ชันคิวบิกเบซิเยร์สำหรับแอนิเมชั่น

คุณสมบัติ Animation-timing-function ใช้เพื่อตั้งค่าฟังก์ชันความราบรื่น:

@keyframes backgroundColorAnimation (จาก (สีพื้นหลัง: สีแดง;) ถึง (สีพื้นหลัง: สีน้ำเงิน;)) div (ความกว้าง: 100px ความสูง: 100px ระยะขอบ: 40px 30px เส้นขอบ: 1px ของแข็ง # 333 ชื่อภาพเคลื่อนไหว: backgroundColorAnimation ; animation-duration: 3s; animation-timing-function: ease-in-out;)

คุณสมบัติแอนิเมชั่น

คุณสมบัติแอนิเมชั่นเป็นวิธีชวเลขในการกำหนดคุณสมบัติด้านบน:

แอนิเมชั่น: แอนิเมชั่น-ชื่อแอนิเมชั่น-ระยะเวลาแอนิเมชั่น-เวลา-ฟังก์ชั่นแอนิเมชั่น-วนซ้ำ-นับแอนิเมชั่น-ทิศทางแอนิเมชั่น-หน่วงเวลาแอนิเมชั่น-เติมโหมด

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

ลองใช้ชุดคุณสมบัติต่อไปนี้:

ชื่อแอนิเมชั่น: backgroundColorAnimation; แอนิเมชั่น-duration: 5s; แอนิเมชั่น-ไทม์มิ่ง-ฟังก์ชัน: ง่ายต่อการเข้า-ออก; แอนิเมชั่น-วนซ้ำ-นับ: 3; แอนิเมชั่น-ทิศทาง: ทางเลือก; ภาพเคลื่อนไหวล่าช้า: 1s; แอนิเมชั่นเติมโหมด: ส่งต่อ;

ชุดนี้จะเทียบเท่ากับคำจำกัดความของภาพเคลื่อนไหวต่อไปนี้:

แอนิเมชั่น: backgroundColorAnimation 5s เข้าออกง่าย 3 สลับไปข้างหน้า 1 วินาที;

การสร้างแบนเนอร์ด้วยแอนิเมชั่น

ตัวอย่างภาพเคลื่อนไหว เรามาสร้างแบนเนอร์ภาพเคลื่อนไหวอย่างง่ายกัน:

แบนเนอร์ HTML

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

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

1. คุณสมบัติพื้นฐานของแอนิเมชั่น CSS3

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

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

นี่เป็นเพียงคุณสมบัติพื้นฐาน ซึ่งมากเกินพอที่จะสร้างแอนิเมชั่น CSS3 แรกของคุณ

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

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

2. ตัวอย่างอนิเมชั่น CSS3 ที่แท้จริง

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

เมื่อเรียนภาษาโปรแกรม พวกเขามักจะเขียนโปรแกรม "สวัสดี ชาวโลก!" แต่เราไม่ได้เรียนภาษาโปรแกรม แต่เป็นภาษาที่ใช้อธิบายลักษณะที่ปรากฏของเอกสาร ดังนั้นเราจะมี "สวัสดีชาวโลก!" ของเราเอง

นี่คือสิ่งที่เราจะทำเป็นตัวอย่าง:มาสร้างบล็อคกันเถอะ

ในตอนแรกจะมีความกว้าง 800px และลดขนาดลงเหลือ 100px ใน 5 วินาที

ทุกอย่างดูเหมือนจะชัดเจน - คุณเพียงแค่ต้องบีบอัดบล็อก

และนั่นแหล่ะ! เรามาดูกันว่าในความเป็นจริงเป็นอย่างไร

ขั้นแรกให้มาร์กอัป HTML ง่ายมากเพราะเราทำงานกับองค์ประกอบเดียวเท่านั้นต่อหน้า

1	<div class = "toSmallWidth">

และนี่คือสิ่งที่อยู่ในสไตล์ชีต:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (ระยะขอบ: อัตโนมัติ 20px; / * 20px การเติมด้านบนและด้านล่างและการจัดตำแหน่งตรงกลาง * /พื้นหลัง: สีแดง; / * พื้นหลังสีแดงสำหรับบล็อก * /ความสูง: 100px; / * ความสูงของบล็อก 100px * /ความกว้าง: 800px; / * ความกว้างเริ่มต้น 800px * /-webkit-animation-name: animWidthSitehere; -webkit-นิเมชั่น-duration: 5s; / * คุณสมบัติพร้อมคำนำหน้าสำหรับเบราว์เซอร์ Chrome, Safari, Opera * /ชื่อแอนิเมชั่น: animWidthSitehere; / * ระบุชื่อของคีย์เฟรม (อยู่ด้านล่าง) * /แอนิเมชั่น-duration: 5s; / * กำหนดระยะเวลาของภาพเคลื่อนไหว * / } / * คีย์เฟรมพร้อมคำนำหน้าสำหรับเบราว์เซอร์ Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSitehere (จาก (กว้าง: 800px;) ถึง (กว้าง: 100px;)) @keyframes animWidthSitehere (จาก (กว้าง: 800px;) / * คีย์เฟรมแรกที่ความกว้างของบล็อกคือ 800px * /ถึง (กว้าง: 100px;) / * คีย์เฟรมสุดท้ายที่ความกว้างของบล็อกคือ 100px * / }

อย่างที่คุณเห็น เราได้ระบุเฉพาะคีย์เฟรมแรกและคีย์เฟรมสุดท้าย และคีย์เฟรมระดับกลางทั้งหมดได้รับการ "สร้าง" โดยอัตโนมัติ

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

3. ตัวอย่างของแอนิเมชั่น CSS3 นั้นซับซ้อนกว่า

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

แนวทางปฏิบัติในการพัฒนาทรัพยากรบนเว็บทำให้เกิดแนวโน้มสำคัญ 2 ประการ ได้แก่ ความเร็วและการรับรู้คุณภาพ ประการแรกกำหนดให้นักพัฒนาต้องทำงานอย่างรวดเร็ว ประการที่สอง - กำหนดขอบเขตของความเหมาะสม

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

ไวยากรณ์และความหมายของแอนิเมชัน

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

ตัวอย่างนี้อธิบายสององค์ประกอบ อย่างแรกคือแถบตัวบ่งชี้ที่เลื่อนไปทางขวาและเพิ่มขนาดตามสัดส่วน องค์ประกอบที่สองคือรูปภาพที่เลื่อนไปทางขวา

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

การซ้อนทับและการโต้ตอบขององค์ประกอบ

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

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

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

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

ที่นี่แถบนี้เปลี่ยนลักษณะที่ปรากฏอย่างต่อเนื่องจากสถานะทึบแสงเป็นแถบโปร่งใส ในกรณีนี้ รูปภาพด้านล่างจะเปลี่ยนเฉพาะรูปร่างเท่านั้น

ข้อมูลแอนิเมชั่น

ใน CSS: แอนิเมชั่นข้อความมีความหมายพิเศษ ข้อความมีความสำคัญเสมอและปรากฏบนหน้าเว็บเพื่อวัตถุประสงค์เฉพาะ แต่ข้อความนั้นให้ข้อมูลน้อยกว่ารูปภาพเสมอ และใช้พื้นที่มาก

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

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

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

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

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

แอนิเมชั่นสำหรับผู้บริโภค

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

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

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

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

ความแตกต่างของ "แอนิเมชั่นสำหรับผู้บริโภค" คือเมื่อมีสิ่งที่นักพัฒนาแนะนำ และสิ่งที่ผู้บริโภคคนก่อนเลือก และสิ่งที่ผู้บริโภคในปัจจุบันคิด

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

ระดับ

ซาปิน

สื่อการสอน

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

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

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

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

กฎ CSS @keyframes

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

ในการตรวจสอบทฤษฎีและพื้นฐาน เราจะใช้ CSS ล้วนๆ และในอนาคต เราจะเชื่อมโยงการใช้ตัวประมวลผลล่วงหน้าของ Sass ด้วยตัวอย่างที่ซับซ้อนยิ่งขึ้น คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Sass ได้ในบทช่วยสอน นอกจากนี้ เพื่อความเข้าใจพื้นฐานของ CSS ที่ลึกซึ้งยิ่งขึ้น ฉันยังแนะนำให้คุณอ่านบทเรียน "CSS Basics - A Guide for the Little Ones" และ "All CSS Selectors in One Lesson"

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

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

ในบรรทัดแรก เราจะเห็นว่าหลังจากคีย์เวิร์ด @keyframes มีชื่อว่า "turning" นี่คือชื่อบล็อกของคีย์เฟรม ซึ่งเราจะกล่าวถึงด้านล่าง

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

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

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

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

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

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

แอนิเมชั่น: การเปลี่ยน 2 วินาที ผ่อนคลาย 1 วินาที สลับกันไม่รู้จบ

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

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

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

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

แอนิเมชั่น: (1.animation-name - name) (2.animation-duration - Duration) (3.animation-timing-function dynamics of movement) (4.animation-delay - หยุดชั่วคราวก่อนเริ่ม) (5.animation-iteration- นับ - จำนวนการประหารชีวิต) (6.animation-direction - direction)

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

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

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้สัญกรณ์สั้น ๆ เริ่มต้นด้วย " แอนิเมชั่น", ตามด้วยค่า, ลำดับที่ไม่ควรลืมจะดีกว่าเพื่อไม่ให้เกิดความสับสนเมื่อเขียนภาพเคลื่อนไหว CSS

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