ก่อนการถือกำเนิดของ CSS3 คำว่า "แอนิเมชั่น" ทำให้นักออกแบบเลย์เอาต์ต้องเหงื่อตก และทั้งหมดเป็นเพราะในสมัยนั้นต้องสร้างคุณภาพสูงและ แอนิเมชั่นที่สวยงามไม่มี งานจิ๊บจ๊อย- CSS ไม่สามารถทำได้ ดังนั้นภาพเคลื่อนไหวทั้งหมดจึงทำใน JavaScript จำเป็นต้องกรองฟอรั่มต่างๆ ค้นหาสหายกลุ่มเดียวกันที่โชคร้าย ใช้เวลาส่วนใหญ่ในการพัฒนา และท้ายที่สุดก็ได้ยินจากนักออกแบบ: "เอาล่ะ เท่านี้ก็จะสำเร็จ" และเมื่อ CSS3 ออกมาในที่สุด ดอกไม้ไฟก็ไม่หยุดจนกระทั่งเช้า และแชมเปญก็ไหลราวกับแม่น้ำ เป็นวันที่ดีสำหรับนักพัฒนาเว็บทุกคน (วันถัดไปคือวันที่ Microsoft ประกาศสิ้นสุดการสนับสนุน อินเทอร์เน็ตเอ็กซ์พลอเรอร์- ด้วยการถือกำเนิดของ CSS3 งานที่ซับซ้อนก่อนหน้านี้หลายอย่างกลายเป็นเรื่องง่ายและสนุกสนานในการทำงาน เช่นเดียวกับภาพเคลื่อนไหวใน CSS ซึ่งฉันจะพูดถึงในบทความนี้

การเปลี่ยน CSS

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

เมื่อคุณวางเคอร์เซอร์ไว้เหนือสี่เหลี่ยม สีพื้นหลังจะเปลี่ยนไปอย่างราบรื่น

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

• การเปลี่ยนแปลงทรัพย์สิน;
• ระยะเวลาการเปลี่ยนแปลง;
• การเปลี่ยนแปลงเวลาฟังก์ชั่น;
• การเปลี่ยนแปลงล่าช้า;
• การเปลี่ยนแปลง;

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

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

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

ระยะเวลาการเปลี่ยนผ่าน: 1 วินาที;

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

ฟังก์ชันการเปลี่ยนเวลา: ลูกบาศก์เบซิเยร์ (0, 0, 1, 1);

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

ความล่าช้าในการเปลี่ยน: 500ms;

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

การเปลี่ยนผ่าน: สีพื้นหลัง 1 วินาทีลูกบาศก์เบซิเยร์ (0, 0, 1, 1) 500ms;

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

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

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

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

วงกลมของเรามีชีวิตขึ้นมาและดูเหมือนว่าจะเร้าใจ

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

• ชื่อแอนิเมชั่น;
• ภาพเคลื่อนไหว-ระยะเวลา;
• ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว;
• ภาพเคลื่อนไหวล่าช้า;
• ภาพเคลื่อนไหวซ้ำนับ;
• ทิศทางแอนิเมชั่น;
• แอนิเมชั่นเล่นสถานะ;
• แอนิเมชั่นเติมโหมด;
• แอนิเมชั่น;

ชื่อแอนิเมชั่น- นี่คือชื่อของภาพเคลื่อนไหวที่เชื่อมโยงกฎ @keyframes กับตัวเลือก

ชื่อแอนิเมชั่น: my-animation;

@keyframes ภาพเคลื่อนไหวของฉัน ( 0% ( ความทึบ: 0; ) 100% ( ความทึบ: 1; ) )ภาพเคลื่อนไหวซ้ำนับ

- กำหนดจำนวนการทำซ้ำของแอนิเมชั่น ค่าเริ่มต้นคือ 1 ค่าอนันต์หมายความว่าแอนิเมชั่นจะเล่นอย่างไม่มีที่สิ้นสุด

ภาพเคลื่อนไหวนับซ้ำ: 2;ทิศทางภาพเคลื่อนไหว

- กำหนดทิศทางของภาพเคลื่อนไหว

ทิศทางแอนิเมชั่น: ย้อนกลับ; - สถานะการเล่นภาพเคลื่อนไหวควบคุมการหยุดและการเล่นภาพเคลื่อนไหว มีสองค่าคือ กำลังรัน (ภาพเคลื่อนไหวจะเล่นตามค่าเริ่มต้น) และหยุดชั่วคราว (หยุดภาพเคลื่อนไหว)

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

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

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

แอนิเมชั่นเติมโหมด: ย้อนกลับ;

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

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

โมดูลเส้นทางการเคลื่อนไหว

Motion Path Module CSS ช่วยให้คุณสร้างการเคลื่อนไหวของวัตถุตามเส้นทางผ่านคุณสมบัติเส้นทางการเคลื่อนไหวพิเศษ ก่อนหน้านี้แอนิเมชั่นดังกล่าวสามารถทำได้ด้วยเท่านั้น โดยใช้ SVGหรือสคริปต์ที่ซับซ้อน

ข้อกำหนดนี้มี 3 คุณสมบัติ:

• เส้นทางการเคลื่อนไหว;
• การเคลื่อนไหวชดเชย;
• การเคลื่อนไหวการหมุน;

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

เส้นทางการเคลื่อนไหว: เส้นทาง ("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

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

@keyframes เครื่องบินบิน ( 0% ( ชดเชยการเคลื่อนไหว: 0; ) 100% ( ชดเชยการเคลื่อนไหว: 100%; ) )

การเคลื่อนไหวการหมุน- คุณสมบัตินี้ช่วยให้คุณระบุได้ว่าวัตถุจะเคลื่อนที่ไปข้างหน้าด้านใด คุณสามารถระบุอัตโนมัติ ย้อนกลับ หรือค่าของคุณเองเป็นองศาได้ ("-45deg", "30deg" ฯลฯ)

การเคลื่อนไหวหมุน: อัตโนมัติ;

น่าเสียดายที่ปัจจุบัน Motion-path รองรับเฉพาะใน Chrome และ Opera เท่านั้น แต่หวังว่าเบราว์เซอร์อื่นๆ จะเป็นไปตามตัวอย่างของพวกเขาในเร็วๆ นี้ เพราะสิ่งนี้มีประโยชน์จริงๆ

สำหรับผู้ที่ยังไม่เข้าใจวิธีการทำงานหรือต้องการทำความเข้าใจให้ดีขึ้น ฉันได้จัดทำตัวอย่าง (ลิงก์ไปยัง codeopen)

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

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

เปลี่ยนสีขององค์ประกอบได้อย่างราบรื่นเมื่อวางเมาส์เหนือโดยใช้การเปลี่ยน

#กล่อง1 (
ขอบล่าง: 5px;
สีพื้นหลัง: #ccc;

ช่องว่างภายใน: 10px;
การจัดแนวข้อความ: กึ่งกลาง;
ความกว้าง: 200px;
ความสูง:100px;

เยื้องข้อความ: 0px;
เส้นขอบ: 1px ทึบ #888;
-moz-transition: สีพื้นหลัง 0.8s 0.1s ง่าย;
-o-transition: สีพื้นหลัง 0.8s 0.1s ง่าย;
-webkit-transition: สีพื้นหลัง 0.8s 0.1s ง่าย;
เคอร์เซอร์: ตัวชี้;)

#กล่อง1 :โฮเวอร์ {
สีพื้นหลัง: #97CE68;
สี: #333;
}

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

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

การปรับขนาดองค์ประกอบ

#กล่อง2 (
ขอบล่าง: 5px;
สีพื้นหลัง: #ccc;
สี: #333;

ช่องว่างภายใน: 10px;
การจัดแนวข้อความ: กึ่งกลาง;
ความกว้าง: 200px;
ความสูง:100px;

เยื้องข้อความ: 0px;
เส้นขอบ: 1px ทึบ #888;
-moz-transition: เชิงเส้น 1 วินาทีทั้งหมด;
-o-transition: เชิงเส้น 1 วินาทีทั้งหมด;
-webkit-transition: เชิงเส้น 1 วินาทีทั้งหมด;
เคอร์เซอร์: ตัวชี้;)

#กล่อง2 :โฮเวอร์ {
สีพื้นหลัง: #97CE68;
สี: #000;
ความกว้าง: 150px;
ความสูง:50px;
}

ในตัวอย่างนี้เราประสบความสำเร็จแล้ว การเปลี่ยนแปลงที่ราบรื่นขนาดบล็อกเมื่อโฮเวอร์ ค่ามาตรฐาน 200 x 100 และค่าโฮเวอร์คือ 150 x 50 ซึ่งระบุโดยแอตทริบิวต์ :โฮเวอร์

ที่นี่คุณยังสามารถเปลี่ยนบล็อกได้เฉพาะความกว้างหรือความสูงเท่านั้น :โฮเวอร์ลบ ความกว้าง:— บล็อกเปลี่ยนเฉพาะความสูงเท่านั้น ความสูง:— บล็อกจะเปลี่ยนเฉพาะความกว้างเท่านั้น

คุณยังสามารถเปลี่ยนอัตราการเปลี่ยนแปลงได้ ในกรณีนี้คือ 1 วินาที

แรงบิดของวัตถุ

#กล่อง3 (
ขอบล่าง: 5px;
สีพื้นหลัง: #ccc;
สี: #333;

ช่องว่างภายใน: 10px;
การจัดแนวข้อความ: กึ่งกลาง;
ความกว้าง: 200px;
ความสูง:100px;

เยื้องข้อความ: 0px;
เส้นขอบ: 1px ทึบ #888;
-moz-transition: ความสะดวกใน 1s 0.1s ทั้งหมด;
-o-transition: ความสะดวกใน 1s 0.1s ทั้งหมด;
-webkit-transition: ความสะดวกใน 1s 0.1s ทั้งหมด;
เคอร์เซอร์: ตัวชี้;)

#box3:โฮเวอร์ (
สีพื้นหลัง: #97CE68;
สี: #000;
-webkit-transform: หมุน (360deg);
-moz-transform: หมุน (360deg);
-o-transform: หมุน (360deg);
}

แรงบิดเกิดขึ้นโดยใช้ แปลงร่างและ การเปลี่ยนแปลง- ในกรณีนี้วัตถุจะหมุนตามเข็มนาฬิกา 360 องศาด้วยความเร็วหนึ่งวินาที หากคุณต้องการให้บล็อกหมุนทวนเข็มนาฬิกา แปลงร่างควรตั้งค่าเป็น - (ลบ) โดยธรรมชาติแล้วระดับการหมุนสามารถเปลี่ยนแปลงได้

ซูมเข้าและออกจากวัตถุได้อย่างราบรื่น

#กล่อง4 (
ขอบล่าง: 5px;
สีพื้นหลัง: #ccc;
สี: #333;
ช่องว่างภายใน: 10px;
การจัดแนวข้อความ: กึ่งกลาง;
ความกว้าง: 200px;
ความสูง:100px;

เยื้องข้อความ: 0px;
เส้นขอบ: 1px ทึบ #888;
-moz-transition: คลายออกทั้ง 3 วินาที;
-o-transition: การผ่อนผันทั้ง 3 วินาที;
-webkit-transition: ง่ายทั้ง 3 วินาที;
เคอร์เซอร์: ตัวชี้;)

#box4:โฮเวอร์ (
สีพื้นหลัง: #97CE68;
สี: #000;
-webkit-transform: ขนาด (2);
-moz-transform: ขนาด (2);
-o-transform: สเกล (2);
}

ในตัวอย่างนี้ บล็อกจะเพิ่มขนาดได้อย่างราบรื่น 2 เท่า ค่านี้ถูกตั้งค่าไว้ แปลงร่าง: สเกล(2)- หากคุณตั้งค่าเป็น 1.5 บล็อกจะขยายใหญ่ขึ้น 1.5 เท่า

ในลักษณะเดียวกับที่คุณทำได้ ลดขนาด block เช่น ตั้งค่าเป็น 0.5

เลื่อนบล็อกได้อย่างราบรื่นลง

#กล่อง5 (
ขอบล่าง: 5px;
สีพื้นหลัง: #ccc;
สี: #333;
ช่องว่างภายใน: 10px;
การจัดแนวข้อความ: กึ่งกลาง;
ความกว้าง: 200px;
ความสูง:100px;

เยื้องข้อความ: 0px;
เส้นขอบ: 1px ทึบ #888;
-moz-transition: ความสะดวกเข้า-ออกทั้งหมด 1 วินาที;
-o-transition: ความสะดวกเข้า - ออกทั้งหมด 1 วินาที;
-webkit-transition: ง่ายต่อการเข้า - ออกทั้งหมด 1 วินาที;
เคอร์เซอร์: ตัวชี้;)

#box5:โฮเวอร์ (
สีพื้นหลัง: #97CE68;
สี: #000;
-webkit-transform: แปล (0.50px);
-moz-transform: แปล (0.50px);
-o-transform: แปล (0.50px);
}

ในที่นี้การเคลื่อนไหวจะระบุเป็นพิกเซล ในกรณีนี้ (0.50px) คุณยังสามารถทำให้บล็อกเพิ่มขึ้นได้ด้วยค่านี้ที่ 0.-50px หรือลงแนวทแยง 50px,50px กล่าวอีกนัยหนึ่งก็คือบล็อกสามารถสร้างให้เคลื่อนที่ได้ทุกที่

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

และข้อมูลนี้ถูกแบ่งปันกับเราโดยเว็บไซต์ shpargalkablog.ru ซึ่งฉันขอขอบคุณเขามาก

แค่นี้ก็แน่ใจแล้ว :-) แล้วพบกันใหม่นะเพื่อนๆ

เราเพิ่งเห็นสิ่งนั้น การเปลี่ยนภาพ- มันเป็นเพียงวิธีการ ภาพเคลื่อนไหวคุณสมบัติสไตล์จาก ต้นฉบับถึง สุดท้ายเงื่อนไข.

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

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

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

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

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

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

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

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

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

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

หากต้องการทำให้ปุ่มดาวน์โหลดเคลื่อนไหว คุณสามารถเขียนภาพเคลื่อนไหวได้ กระเด้ง:

@keyframes กระเด้ง( 0% ( ด้านล่าง: 0; กล่องเงา: 0 0 5px rgba(0,0,0,0.5); ) 100% ( ด้านล่าง: 50px; กล่องเงา: 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 วินาที (ไม่มีการหน่วงเวลา)
• ภาพเคลื่อนไหวซ้ำนับ: ไม่มีที่สิ้นสุด (เล่นไม่มีที่สิ้นสุด)
• ทิศทางแอนิเมชั่น: สลับกัน (กลับไปกลับมา)
• แอนิเมชั่นเติมโหมด: ทั้งสอง

@คีย์เฟรม

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

• 0% - ขั้นตอนแรกของแอนิเมชั่น
• 50% คือขั้นตอนครึ่งทางของภาพเคลื่อนไหว
• 100% เป็นขั้นตอนสุดท้าย

ยังสามารถใช้ได้ คำหลักจากและถึงแทนที่จะเป็น 0% และ 100% ตามลำดับ

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

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

หากต้องการกำหนดภาพเคลื่อนไหว เพียงเขียนคีย์เวิร์ด @keyframes ลงไป ชื่อ:

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

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

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

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

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

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

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

• ตัวอักษร (a-z);
• ตัวเลข (0-9);
• ขีดเส้นใต้(_);
• ยัติภังค์ (-)

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

ภาพเคลื่อนไหว-ระยะเวลา

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

ตัวเลือก ( ระยะเวลาภาพเคลื่อนไหว: 0.5s; )

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

ฟังก์ชั่นการจับเวลาภาพเคลื่อนไหว

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

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

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

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

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

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

ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าไม่มีความล่าช้าใดๆ

มีประโยชน์เมื่อรวมภาพเคลื่อนไหวหลายรายการเข้าด้วยกัน ชุด.

A, .b, .c ( แอนิเมชั่น: กระเด้ง 1s; ) .b ( แอนิเมชั่นดีเลย์: 0.25s; ) .c ( แอนิเมชั่นดีเลย์: 0.5s; )

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

ตามค่าเริ่มต้น ภาพเคลื่อนไหวจะเล่นเท่านั้น ครั้งหนึ่ง(ค่า 1) คุณสามารถตั้งค่าได้สามประเภท:

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

.selector ( จำนวนภาพเคลื่อนไหวซ้ำ: ไม่มีที่สิ้นสุด; )

ทิศทางภาพเคลื่อนไหว

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

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

วิธีนี้ง่ายกว่าที่จะจินตนาการหากจำนวนการวนซ้ำของภาพเคลื่อนไหวถูกตั้งค่าเป็นอนันต์

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

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

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

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

ลองจินตนาการดู ปุ่มซึ่งก็คือ:

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

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

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

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

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

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

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

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

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

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

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

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