CSS เป็นหนึ่งในวิธีที่มีประสิทธิภาพที่สุดในการทำให้หน้าเว็บโต้ตอบได้ มันเปลี่ยนรูปลักษณ์และความรู้สึกพื้นฐานของเรา หน้าเว็บ. คุณสมบัติที่สำคัญและน่าตื่นเต้นอย่างหนึ่งที่ CSS นำเสนอคือช่วยให้เราแสดงภาพเคลื่อนไหวได้ ช่วยให้เราสามารถย้ายองค์ประกอบภายในหน้าของเรา มาเริ่ม Journey of Animations ใน CSS ตามลำดับต่อไปนี้:
ภาพเคลื่อนไหวใน CSS
การเพิ่มภาพเคลื่อนไหวลงในเว็บไซต์ของเราเป็นวิธีที่ดีในการดึงดูดความสนใจของผู้ใช้ ไม่เพียงเพิ่มมูลค่าให้กับเพจของเราเท่านั้น แต่ยังช่วยเพิ่มประสบการณ์ของผู้ใช้อีกด้วย ภาพเคลื่อนไหวใน CSS สร้างขึ้นจากสองส่วน พวกเขาคือ
- คีย์เฟรม
- ภาพเคลื่อนไหว
ภาพเคลื่อนไหว CSS ได้รับการสนับสนุนในทุกเบราว์เซอร์ อย่างไรก็ตามเบราว์เซอร์รุ่นเก่าบางตัวเช่น Safari (ไม่เกินเวอร์ชัน 8.0) ต้องการคำนำหน้า (-webkit-) เพื่อตีความคุณสมบัติของภาพเคลื่อนไหว ตัวอย่างเช่น:
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% -webkit-animation-name: cssanim / * old browser * / -webkit-animation-duration: 5s / * old browser * / animation -name: cssanim animation-duration: 5s} / * old browser * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {เหลือ: 300px}}เราสามารถใช้ตัวอย่างหน้า html จากด้านบนและแทนที่โค้ด CSS ในแท็กสไตล์เพื่อลองดูตัวอย่างเพิ่มเติม
คีย์เฟรมใน CSS
นี่คือส่วนประกอบพื้นฐานของภาพเคลื่อนไหวใน CSS ใช้เพื่อกำหนดช่วงเวลาและรูปแบบเฉพาะของภาพเคลื่อนไหวบนหน้าเว็บของเรา กล่าวอีกนัยหนึ่งคือเมื่อเราระบุ @keyframes ภายใน CSS ของเรามันจะได้รับการควบคุมเพื่อปรับเปลี่ยนสถานะปัจจุบันเป็นสถานะใหม่หรือทำให้วัตถุเคลื่อนไหวในช่วงเวลาหนึ่ง
กองและกองใน java
@keyframes ต้องมีคุณสมบัติบางอย่างในการควบคุมภาพเคลื่อนไหวเช่นชื่อของภาพเคลื่อนไหวขั้นตอนและคุณสมบัติ
ชื่อ - ต้องมีชื่อสำหรับทุกภาพเคลื่อนไหวเพื่ออธิบายพฤติกรรมของมัน
ขั้นตอน - เวทีแสดงภาพเคลื่อนไหวที่เสร็จสมบูรณ์ สามารถแสดงด้วยคีย์เวิร์ด“ ถึง” และ“ จาก” หรือเป็นเปอร์เซ็นต์ในขณะที่ 0% แสดงสถานะเริ่มต้นและ 100% แสดงสถานะสิ้นสุดของแอนิเมชั่น ประโยชน์ของการใช้การแสดงเปอร์เซ็นต์คือเราสามารถกำหนดขั้นตอนกลางหลาย ๆ ขั้นระหว่างกันได้เช่นพฤติกรรมของแอนิเมชั่นที่ระยะ 50% หรือ 75% เป็นต้นควรเป็นอย่างไร
คุณสมบัติ - คุณสมบัติเหล่านี้ทำให้เราสามารถควบคุม @keyframes เพื่อจัดการกับมันในระหว่างการเคลื่อนไหว
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}ตอนนี้เนื่องจากเรามีความชัดเจนเกี่ยวกับการกำหนดคีย์เฟรม ให้เราสำรวจคุณสมบัติของภาพเคลื่อนไหวเพื่ออธิบายวิธีทำให้องค์ประกอบและวัตถุของเราเคลื่อนไหว คุณสมบัติสองอย่างคือสืบทอดและเริ่มต้นสามารถใช้กับประเภทภาพเคลื่อนไหวทั้งหมด โดยทั่วไปคุณสมบัติเหล่านี้จะใช้ร่วมกับแท็ก div เพื่อแสดงพฤติกรรมที่แตกต่างกัน
เริ่มต้น: ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น
สืบทอด: รับช่วงคุณสมบัตินี้จากองค์ประกอบหลัก
คุณสมบัติของภาพเคลื่อนไหว
- ชื่อแอนิเมชั่น
ระบุชื่อของภาพเคลื่อนไหวซึ่งใช้ใน @keyframes เพื่อจัดการค่าที่เป็นไปได้คือ:
- ชื่อ: ซึ่งระบุชื่อที่จะเชื่อมโยงกับคีย์เฟรมสำหรับภาพเคลื่อนไหว
- ไม่มี: ค่านี้เป็นค่าเริ่มต้นและสามารถใช้เพื่อแทนที่ภาพเคลื่อนไหวที่สืบทอดมาหรือเรียงซ้อน
ไวยากรณ์:
ชื่อแอนิเมชั่น: ชื่อ | ไม่มี | เริ่มต้น | สืบทอด
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- ภาพเคลื่อนไหว - ระยะเวลา
ระบุเวลาที่แอนิเมชั่นใช้ในการดำเนินการหนึ่งครั้ง กำหนดเป็นวินาทีหรือมิลลิวินาที (เช่น 4 วินาทีหรือ 400 มิลลิวินาที) ค่าดีฟอลต์ของคุณสมบัตินี้คือ 0 ดังนั้นหากไม่ได้ระบุคุณสมบัตินี้ภาพเคลื่อนไหวจะไม่เกิดขึ้น
ไวยากรณ์:
ระยะเวลาการเคลื่อนไหว: เวลา
.anim {height: 200px width: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- ภาพเคลื่อนไหวล่าช้า
คุณสมบัติการหน่วงเวลาของภาพเคลื่อนไหวช่วยให้เราสามารถระบุความล่าช้าในการเคลื่อนไหวได้ กำหนดเวลาที่ลำดับภาพเคลื่อนไหวจะเริ่มดำเนินการ
ค่าของคุณสมบัตินี้สามารถประกาศได้ในหน่วยวินาทีหรือมิลลิวินาที (มิลลิวินาที) สามารถเก็บทั้งค่าบวกและค่าลบ ค่าบวกบ่งชี้ว่าภาพเคลื่อนไหวจะเริ่มขึ้นหลังจากเวลาที่กำหนดผ่านไปและจนกว่าจะถึงเวลานั้นจะยังคงเป็นเอกภาพ ในทางกลับกันค่าลบจะเริ่มการเคลื่อนไหวจากจุดนั้นทันทีราวกับว่าได้ดำเนินการตามกรอบเวลาที่กำหนดแล้ว
ไวยากรณ์:
ภาพเคลื่อนไหวล่าช้า: เวลา
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {ซ้าย: 250px}}- แอนิเมชั่นซ้ำ - นับ
คุณสมบัตินี้ระบุจำนวนครั้งที่ควรเล่นลำดับภาพเคลื่อนไหว ค่าเริ่มต้นของคุณสมบัตินี้คือ 1ค่าที่เป็นไปได้คือ:
- จำนวน - หมายถึงจำนวนการทำซ้ำ
- ไม่มีที่สิ้นสุด - ระบุว่าภาพเคลื่อนไหวควรเล่นซ้ำตลอดไป
ไวยากรณ์:
แอนิเมชั่นซ้ำ - นับ: จำนวน | ไม่มีที่สิ้นสุด
อะไรที่เปลี่ยนแปลงไม่ได้และไม่เปลี่ยนรูป
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {เหลือ: 100px}}- ทิศทางการเคลื่อนไหว
เป็นการกำหนดทิศทางของภาพเคลื่อนไหว สามารถกำหนดทิศทางขององค์ประกอบให้เล่นไปข้างหน้าถอยหลังหรือในรอบอื่นได้ค่าดีฟอลต์ของคุณสมบัตินี้เป็นค่าปกติและได้รับการรีเซ็ตในแต่ละรอบค่าที่เป็นไปได้คือ:
ปกติ - นี่เป็นลักษณะการทำงานเริ่มต้นและภาพเคลื่อนไหวจะเล่นไปข้างหน้า หลังจากแต่ละรอบภาพเคลื่อนไหวจะเข้าสู่สถานะเริ่มต้นและเล่นไปข้างหน้าอีกครั้ง
ย้อนกลับ - ภาพเคลื่อนไหวจะเล่นในทิศทางย้อนกลับ หลังจากแต่ละรอบภาพเคลื่อนไหวจะเข้าสู่สถานะสิ้นสุดและเล่นย้อนกลับ
สำรอง - ทิศทางของภาพเคลื่อนไหวจะกลับด้านเช่นเล่นไปข้างหน้าก่อนแล้วย้อนกลับในทุกรอบ ทุกรอบคี่จะแสดงภาพเคลื่อนไหวไปข้างหน้าและทุกๆรอบจะแสดงการเคลื่อนที่ย้อนกลับ
ทางเลือก - ย้อนกลับ - ทิศทางของภาพเคลื่อนไหวจะกลับด้านสลับกัน ที่นี่ภาพเคลื่อนไหวจะเล่นย้อนกลับก่อนแล้วจึงเดินหน้าต่อทุกรอบ ทุกรอบคี่จะเคลื่อนที่ย้อนกลับหรือย้อนกลับและทุก ๆ รอบจะแสดงภาพเคลื่อนไหวไปข้างหน้า
ไวยากรณ์:
ทิศทางการเคลื่อนไหว: ปกติ | ย้อนกลับ |ทางเลือก | ทางเลือก - ย้อนกลับ
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {เหลือ: 100px}}- แอนิเมชั่นจับเวลาฟังก์ชั่น
คุณสมบัตินี้กำหนดเส้นโค้งความเร็วหรือรูปแบบการเคลื่อนไหวของแอนิเมชั่น ได้รับมอบหมายให้ทำการเปลี่ยนแปลงรูปแบบแอนิเมชั่นจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่งได้อย่างราบรื่น หากไม่มีการกำหนดค่าค่าเริ่มต้นจะทำให้ง่ายขึ้นค่าที่เป็นไปได้สำหรับฟังก์ชันการจับเวลาภาพเคลื่อนไหวคือ:
ความสะดวก - นี่คือค่าเริ่มต้นของคุณสมบัติ ที่นี่แอนิเมชั่นเริ่มช้าค่อยๆกลายเป็นเร็วตรงกลางแล้วจบลงอย่างช้าๆอีกครั้ง
เชิงเส้น - ภาพเคลื่อนไหวจะรักษาความเร็วเท่ากันตลอดทั้งรอบเช่นตั้งแต่ต้นจนจบ
สะดวกใน - ภาพเคลื่อนไหวเริ่มอย่างช้าๆ
ง่ายออก - ภาพเคลื่อนไหวจบลงอย่างช้าๆ
สะดวกในการเข้า - ออก - ภาพเคลื่อนไหวจะเคลื่อนไหวช้าๆทั้งในช่วงเริ่มต้นและสิ้นสุด
ลูกบาศก์เบเซียร์ (n, n, n, n) - คุณสมบัติขั้นสูงนี้ช่วยให้เราสร้างฟังก์ชันจับเวลาที่กำหนดเองโดยกำหนดค่าของเราเอง ค่าที่เป็นไปได้มีตั้งแต่ 0 ถึง 1
ไวยากรณ์:
แอนิเมชั่นไทม์มิ่งฟังก์ชัน: เชิงเส้น | ความสะดวก ง่ายออก | ง่ายใน | เข้า - ออกง่ายลูกบาศก์เบเซียร์ (n, n, n, n)
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- โหมดเติมภาพเคลื่อนไหว
นี่เป็นคุณสมบัติพิเศษที่กำหนดรูปแบบการเคลื่อนไหวก่อนหรือหลังการเล่นภาพเคลื่อนไหวตามค่าเริ่มต้นรูปแบบขององค์ประกอบจะไม่ได้รับผลกระทบจากภาพเคลื่อนไหวก่อนเริ่มต้นหรือหลังสิ้นสุด คุณสมบัตินี้มีประโยชน์เนื่องจากช่วยในการลบล้างลักษณะการทำงานเริ่มต้นของภาพเคลื่อนไหวต่อไปนี้เป็นค่าที่เป็นไปได้สำหรับคุณสมบัติโหมดเติมภาพเคลื่อนไหว:
ไม่มี - นี่คือค่าเริ่มต้นของคุณสมบัตินั่นคือรูปแบบการเคลื่อนไหวจะไม่ถูกนำไปใช้กับองค์ประกอบก่อนหรือหลังภาพเคลื่อนไหว
ส่งต่อ - สไตล์จะถูกคงไว้โดยองค์ประกอบในลำดับภาพเคลื่อนไหวสุดท้ายเช่นหลังจากภาพเคลื่อนไหวเสร็จสิ้น
ถอยหลัง - สไตล์จะถูกคงไว้โดยองค์ประกอบในลำดับภาพเคลื่อนไหวเริ่มต้นนั่นคือก่อนที่ภาพเคลื่อนไหวจะถูกจ้องโดยเฉพาะในช่วงหน่วงเวลาของภาพเคลื่อนไหว
ทั้งสองอย่าง - นี่หมายความว่าภาพเคลื่อนไหวจะเป็นไปตามทั้งทิศทางเช่นไปข้างหน้าและข้างหลัง
ไวยากรณ์:
คลาส python และตัวอย่างวัตถุ
โหมดเติมภาพเคลื่อนไหว: ไม่มี | ส่งต่อ | ถอยหลัง | ทั้งสองอย่าง
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-duration: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { แอนิเมชั่นไทม์มิ่งฟังก์ชัน: ความสะดวก} # anim2 {แอนิเมชั่นไทม์มิ่งฟังก์ชัน: เชิงเส้น} # anim3 {แอนิเมชั่นไทม์มิ่งฟังก์ชั่น: ความง่ายใน} # anim4 {แอนิเมชั่นไทม์มิ่ง: ความง่ายออก} # anim5 {แอนิเมชั่น - ฟังก์ชันจับเวลา: ความสะดวกในการออก} @keyframes cssanim {from {left: 0px} ถึง {left: 400px}}- ภาพเคลื่อนไหวเล่นสถานะ
คุณสมบัตินี้ระบุภาพเคลื่อนไหวที่จะอยู่ในสถานะเล่นหรือหยุดชั่วคราว นอกจากนี้เมื่อภาพเคลื่อนไหวกลับมาทำงานต่อจากการหยุดชั่วคราวจะเริ่มจากจุดที่ค้างไว้ค่าที่เป็นไปได้คือ:
- กำลังเล่น - เพื่อแสดงภาพเคลื่อนไหวในการทำงาน
- หยุดชั่วคราว - เพื่อแสดงภาพเคลื่อนไหวในสถานะหยุดชั่วคราว
ไวยากรณ์:
animation-play-state: หยุดชั่วคราว | กำลังเล่น
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- ภาพเคลื่อนไหว
สิ่งนี้เรียกว่าคุณสมบัติชวเลขแอนิเมชั่น ใช้สำหรับทำความสะอาดโค้ด เมื่อเราคุ้นเคยกับคุณสมบัติของภาพเคลื่อนไหวทั้งหมดแล้วขอแนะนำให้เราใช้ชวเลขแอนิเมชั่นเพื่อการเข้ารหัสที่เร็วขึ้นและกำหนดคุณสมบัติทั้งหมดในบรรทัดเดียว
ไวยากรณ์:
ภาพเคลื่อนไหว: [ชื่อภาพเคลื่อนไหว] | [ภาพเคลื่อนไหว - ระยะเวลา] | [แอนิเมชั่น - ไทม์มิ่ง - ฟังก์ชัน] |[ภาพเคลื่อนไหวล่าช้า] | [แอนิเมชัน - การวนซ้ำ - นับ] | [ทิศทางการเคลื่อนไหว] |[โหมดเติมภาพเคลื่อนไหว] | [สถานะการเล่นภาพเคลื่อนไหว]
เอฟเฟกต์ภาพเคลื่อนไหวทั้งหมดที่เราแสดงข้างต้นโดยใช้คุณสมบัติการเคลื่อนไหวที่แตกต่างกันสามารถทำได้โดยใช้ชวเลขภาพเคลื่อนไหว ทรัพย์สิน.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}นี่เป็นการสรุปคุณสมบัติของภาพเคลื่อนไหวทั้งหมดที่สามารถใช้ใน CSS เราควรลองใช้คุณสมบัติเหล่านี้ในรูปแบบต่างๆเพื่อให้ได้ภาพที่ชัดเจนยิ่งขึ้น เมื่อเราสบายใจคุณสมบัติชวเลขแอนิเมชั่นสามารถช่วยได้มากในการเขียนโค้ดที่สะอาดและเร็วขึ้น นี่เป็นทักษะสำคัญอย่างหนึ่งในการเรียนรู้ใน CSS สำหรับนักพัฒนาเว็บ เนื่องจากเรามักให้ความสำคัญกับวัตถุที่เคลื่อนไหวมากกว่าวัตถุที่อยู่นิ่งภาพเคลื่อนไหวสามารถช่วยให้เราบรรลุเป้าหมายนั้นได้และยังพัฒนาหน้าเว็บที่น่าทึ่งได้อีกด้วย
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'Animations in CSS' แล้วเราจะติดต่อกลับไป