ภาษา HTML จัดเตรียมโครงสร้างของหน้าเว็บ และ CSS จัดเตรียมการออกแบบและการจัดรูปแบบของแอปพลิเคชันนั้น ชุดค่าผสมนี้ยังช่วยให้คุณเพิ่มภาพเคลื่อนไหวได้ เนื่องจากองค์ประกอบภาพเคลื่อนไหวดูน่าสนใจกว่าเมื่อเทียบกับองค์ประกอบแบบคงที่ นอกจากนี้ยังช่วยให้องค์ประกอบเปลี่ยนรูปแบบทีละน้อย
บทความนี้จะแนะนำวิธีที่เราสามารถนำแอนิเมชันไปใช้กับองค์ประกอบต่างๆ เริ่มกันเลย!
CSS Animation Keyframes คืออะไร?
ในการทำให้แอนิเมชันเสร็จ เราต้องผูกแอนิเมชันกับองค์ประกอบ HTML ในการนี้ให้ใช้คำสำคัญว่า “ @คีย์เฟรม ” ตามด้วยชื่อภาพเคลื่อนไหว ส่วนประกอบนี้ระบุจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว
วิธีตั้งค่าคีย์เฟรมภาพเคลื่อนไหว CSS
ในการตั้งค่าคีย์เฟรมภาพเคลื่อนไหวใน CSS เราจะพิจารณาสองตัวอย่าง
ตัวอย่างที่ 1
สำหรับการตั้งค่าคีย์เฟรมภาพเคลื่อนไหวใน CSS ให้ทำตามขั้นตอนต่อไปนี้:
-
- เพิ่ม ที่มีชื่อคลาส “ หลัก div '.
- ภายใน div เพิ่ม div อื่นด้วยชื่อคลาส “ img-เป็ง '.
- ภายใน img-peng div เพิ่ม
เพื่อวางรูปภาพ แท็กนี้มีคุณลักษณะสามประการ คือ “ src ” แอตทริบิวต์เพื่อให้เส้นทางภาพ “ ทุกอย่าง ” คือข้อความแสดงแทนที่ถูกเพิ่มหากรูปภาพไม่แสดง และข้อความ “ ความกว้าง แอตทริบิวต์ ” เพื่อระบุความกว้างของรูปภาพ
HTML
< แผนก ระดับ = 'หลัก div' >
< แผนก ระดับ = 'อิมเมจเป็ง' >
< img src = 'images/penguin.png' ทุกอย่าง = 'เพนกวิน' ความกว้าง = '100' >
แผนก >
แผนก >
.main-div {
ซีเอสเอส
ความกว้าง: 90 % ;
ความสูง: 90px;
สีพื้นหลัง: rgb ( 67 , 66 , 87 ) ;
ขอบ: อัตโนมัติ 20px;
ช่องว่างภายใน: 10px;
}
ใน CSS คำว่า “ .main-div ” ถูกเพิ่มเพื่อเข้าถึงคลาส div คุณสมบัติที่ใช้กับมันอธิบายไว้ด้านล่าง:-
- “ ความกว้าง ” ค่าคุณสมบัติกำหนดความกว้างของ div
- “ ความสูง คุณสมบัติ ” ใช้เพื่อกำหนดความสูงของ div
- “ สีพื้นหลัง คุณสมบัติ ” ใช้สีกับพื้นหลังขององค์ประกอบ
- “ ขอบ ” ตั้งเป็น “ รถ20px ” ซึ่งระบุช่องว่างจากด้านบนและด้านล่าง และอัตโนมัติหมายถึงระยะห่างเท่ากันจากซ้ายและขวา
- “ การขยายความ ” ค่าคุณสมบัติถูกกำหนดเป็น 10px ซึ่งใช้ช่องว่างรอบเนื้อหาขององค์ประกอบ
สไตล์คลาส img-peng
.img-เป็ง {
ความกว้าง: 50px;
ความสูง: 100px;
ตำแหน่ง: ญาติ;
แอนิเมชั่น: เขย่า;
ระยะเวลาของภาพเคลื่อนไหว: 2 วินาที;
ฟังก์ชั่นจับเวลาภาพเคลื่อนไหว: 2 วินาที;
ภาพเคลื่อนไหวนับซ้ำ: ไม่มีที่สิ้นสุด;
}
“ .img-เป็ง ” ใช้เพื่อเข้าถึงคลาส div ซึ่งกล่าวถึงในไฟล์ HTML ด้านบน องค์ประกอบ div นี้มีสไตล์ตามคุณสมบัติที่กล่าวถึงด้านล่าง:-
- “ ความกว้าง ” ค่าคุณสมบัติใช้เพื่อกำหนดความกว้างขององค์ประกอบ
- “ ความสูง ” ค่าคุณสมบัติใช้เพื่อกำหนดความสูงขององค์ประกอบ
- “ ตำแหน่ง ” คุณสมบัติถูกกำหนดมูลค่า “ ญาติ ” ซึ่งหมายความว่าจะจัดตำแหน่งให้สัมพันธ์กับตำแหน่งปกติ
- “ ภาพเคลื่อนไหว ” พระราชทานนามว่า “ เขย่า '. อย่างไรก็ตาม คุณสามารถตั้งชื่อแอนิเมชั่นตามความต้องการได้
- “ ระยะเวลาของภาพเคลื่อนไหว ” หมายถึงระยะเวลาของภาพเคลื่อนไหว ซึ่งก็คือ 2 วินาที
- “ ฟังก์ชั่นจับเวลาภาพเคลื่อนไหว ” ถูกกำหนดเป็นค่า 2 วินาที ซึ่งหมายถึงใน 2 วินาที ภาพเคลื่อนไหวจะเสร็จสมบูรณ์
- “ ภาพเคลื่อนไหวนับซ้ำ ” ถูกตั้งค่าเป็นอนันต์ ซึ่งหมายความว่าแอนิเมชันนี้จะเกิดขึ้นในเวลาที่ไม่มีที่สิ้นสุด
กำหนด @keyframes ด้วยคำหลักถึงและจาก
@ คีย์เฟรมสั่น {
จาก {
ด้านบน: 50px;
}
ถึง {
ระยะขอบล่าง: 200px;
}
}
คำอธิบายของคีย์เฟรมภาพเคลื่อนไหวที่ตั้งค่าเป็นรูปภาพแสดงอยู่ด้านล่าง:-
- “ @คีย์เฟรมสั่น ” หมายถึงการสั่นของชื่อแอนิเมชั่นตามด้วยคีย์เวิร์ด @keyframes ภายในกฎนี้ มีการระบุพฤติกรรมของภาพเคลื่อนไหว
- ภายในวงเล็บปีกกา ' จาก ' และ ' ถึง ” คีย์เวิร์ดระบุช่วงเวลาต่างๆ เพื่อกำหนดลักษณะการทำงานของแอนิเมชัน
- “ สูงสุด คุณสมบัติ ” ได้รับการกำหนดค่าเป็น 50px ซึ่งหมายความว่าภาพเคลื่อนไหวเริ่มต้นจาก 50px จากด้านบนของหน้าจอและดำเนินต่อไปจนถึง 200px ที่ด้านล่าง
ดังนั้น คุณจะเห็นผลลัพธ์ต่อไปนี้:
ตอนนี้ ให้แอนิเมชั่นทำงานแตกต่างกันในแต่ละช่วงเวลา ในการดำเนินการดังกล่าว ให้ใช้เปอร์เซ็นต์ของภาพเคลื่อนไหวใน @keyframesระบุ @keyframes ด้วยเปอร์เซ็นต์
@ คีย์เฟรมสั่น {
0 % {
ซ้าย: -50px ;
}
25 % {
ซ้าย: 50px;
}
ห้าสิบ % {
ซ้าย: -25px ;
}
75 % {
ซ้าย: 25px;
}
100 % {
ซ้าย: 10px;
}
}
ดังนั้นคำอธิบายของข้อมูลโค้ดด้านบนจึงถูกกล่าวถึงที่นี่:-
- ค่าเปอร์เซ็นต์ 0%, 25%, 50%, 75% และ 100% แสดงถึงภาพเคลื่อนไหวในช่วงเวลาต่างๆ
- นอกจากนี้ ที่ 0% พื้นที่ด้านซ้ายของภาพจะเป็น “ -50px '. ที่ 25% ช่องว่างทางซ้ายจะเป็น “ 50พิกเซล '. ที่ 50% พื้นที่ด้านซ้ายจะเป็น “ -25px '. ที่ 75% พื้นที่ด้านซ้ายจะเป็น “ 25พิกเซล ” และเมื่อภาพเคลื่อนไหวเสร็จสิ้น (100%) พื้นที่ด้านซ้ายจะเป็น “ 10px '.
รหัสด้านบนแสดงภาพเคลื่อนไหวต่อไปนี้:
มาดูอีกตัวอย่างหนึ่งเพื่อดูว่าเราจะตั้งค่าภาพเคลื่อนไหวให้กับรูปภาพได้อย่างไรตัวอย่างที่ 2
ใน HTML เพิ่ม
ที่มีชื่อคลาส “ หน้าหลัก '. ภายในองค์ประกอบนี้ ให้วางแท็ก div อีกสองแท็กที่มีคลาส “ คลาวด์1 ' และ ' คลาวด์2 ” ตามลำดับHTML
< แผนก ระดับ = 'หน้าหลัก' >
< แผนก ระดับ = 'คลาวด์ 1' > แผนก >
< แผนก ระดับ = 'คลาวด์2' > แผนก >
แผนก >
ร่างกาย {
ซีเอสเอส
ขอบ: 0 ;
การขยายความ: 0 ;
}
ใน CSS เราจะกำหนดคุณสมบัติ CSS ต่อไปนี้ให้กับองค์ประกอบเนื้อหา:-
- “ ขอบ ” คุณสมบัติเป็น 0 ระบุไม่มีช่องว่างรอบองค์ประกอบ
- “ การขยายความ คุณสมบัติ ” ที่มีค่า 0 ระบุว่าไม่มีช่องว่างรอบเนื้อหาขององค์ประกอบ
สไตล์ div ของหน้าหลัก
.หน้าหลัก {
ภาพพื้นหลัง: url ( / ภาพ / หมาป่า-night.png ) ;
พื้นหลังซ้ำ: ไม่ซ้ำ;
ขนาดพื้นหลัง: หน้าปก;
ความสูง: 100vh;
ตำแหน่ง: ญาติ;
ล้น: ซ่อน;
}
ที่นี่:-
- “ .หน้าหลัก ” ใช้เพื่อเข้าถึงคลาส div
- “ ภาพพื้นหลัง ” คุณสมบัติถูกกำหนดมูลค่า “ url(/images/wolf-night.png) ” โดยที่รูปภาพคือโฟลเดอร์ที่มีรูปภาพ wolf-night.png
- “ พื้นหลังซ้ำ ” คุณสมบัติถูกกำหนดมูลค่า “ ไม่ซ้ำ ซึ่งหมายความว่าภาพจะแสดงครั้งเดียว
- “ ขนาดพื้นหลัง ” ตั้งเป็น “ ปิดบัง ” เพื่อเติมองค์ประกอบ div ทั้งหมด
- “ ความสูง ” คือ 100vh ซึ่งเป็น 100% ของความสูงของวิวพอร์ต
- “ ตำแหน่ง ” เป็นแบบสัมพัทธ์ ตั้งค่าตำแหน่งภาพโดยสัมพันธ์กับตำแหน่งปัจจุบัน
- “ ล้น ค่าของคุณสมบัติ ” ถูกตั้งค่าเป็น ซ่อน เพื่อซ่อนส่วนของรูปภาพที่ใหญ่เกินไปที่จะใส่ลงในคอนเทนเนอร์
สไตล์คลาส cloud1
.cloud1 {
ภาพพื้นหลัง: url ( / ภาพ / คลาวด์.png ) ;
ขนาดพื้นหลัง: มี;
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตำแหน่ง: แน่นอน;
ด้านบน: 100px;
ความกว้าง: 500px;
ความสูง: 300px;
ภาพเคลื่อนไหว: cloudanimation1;
ระยะเวลาของภาพเคลื่อนไหว: 70 วินาที;
ภาพเคลื่อนไหวนับซ้ำ: ไม่มีที่สิ้นสุด;
}
div class cloud1 ใช้กับคุณสมบัติที่อธิบายต่อไปนี้:-
- “ .cloud1 ” ใช้เพื่อเข้าถึง div class cloud1
- “ ภาพพื้นหลัง คุณสมบัติ ” ถูกตั้งค่าเป็น url(/images/cloud.png) โดยที่รูปภาพคือโฟลเดอร์ที่มีรูปภาพ cloud.png
- “ ขนาดพื้นหลัง ” มีค่า “ บรรจุ ” ทำให้มั่นใจได้ถึงการมองเห็นของภาพ
- “ พื้นหลังซ้ำ ” คุณสมบัติที่มีค่าที่กำหนดเป็น “ ไม่ซ้ำ ” แสดงภาพแบบไม่ซ้ำ
- “ ตำแหน่ง ” เป็นตำแหน่งสัมบูรณ์ของรูปภาพที่สัมพันธ์กับองค์ประกอบของพาเรนต์
- “ สูงสุด คุณสมบัติ ” ตั้งค่ารูปภาพที่ 100px จากด้านบน
- “ ความกว้าง คุณสมบัติ ” ใช้สำหรับตั้งค่าความกว้างขององค์ประกอบ div เป็น 500px
- “ ความสูง คุณสมบัติ ” ใช้สำหรับตั้งค่าความสูงขององค์ประกอบ div เป็น 300px
- “ ภาพเคลื่อนไหว ” ถูกกำหนดชื่อ cloudanimation1
- “ ระยะเวลาของภาพเคลื่อนไหว ” หมายถึงระยะเวลาของภาพเคลื่อนไหว ซึ่งก็คือ 70 วินาที
- “ ภาพเคลื่อนไหวนับซ้ำ ” ถูกกำหนดเป็นค่าอนันต์ ซึ่งจะวนซ้ำแอนิเมชั่นครั้งไม่สิ้นสุด
จนถึงตอนนี้ เราได้ใช้คุณสมบัติ CSS กับหน้าหลักของคลาส div และ cloud1 ในส่วนถัดไป เราจะจัดรูปแบบคลาส div ถัดไปที่ชื่อว่า cloud2
สไตล์คลาส cloud2
.cloud2 {
ภาพพื้นหลัง: url ( / ภาพ / คลาวด์.png ) ;
ขนาดพื้นหลัง: มี;
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตำแหน่ง: แน่นอน;
ด้านบน: 50px;
ความกว้าง: 200px;
ความสูง: 300px;
ภาพเคลื่อนไหว: cloudanimation2;
ระยะเวลาของภาพเคลื่อนไหว: 15 วินาที;
ภาพเคลื่อนไหวนับซ้ำ: ไม่มีที่สิ้นสุด;
}
div class cloud2 ใช้กับคุณสมบัติที่อธิบายด้านล่าง:-
- “ .cloud2 ” ใช้เพื่อเข้าถึงคลาส cloud2
- “ ภาพพื้นหลัง คุณสมบัติ ” ถูกตั้งค่าเป็น url(/images/cloud.png) โดยที่รูปภาพเป็นโฟลเดอร์ที่มีรูปภาพ cloud.png
- “ ขนาดพื้นหลัง ” มีค่าทำให้แน่ใจว่าการมองเห็นของภาพ
- “ พื้นหลังซ้ำ ” พร็อพเพอร์ตี้ที่ตั้งค่าเป็นไม่ซ้ำจะแสดงรูปภาพเป็นไม่ซ้ำ
- “ ตำแหน่ง ” เป็นตำแหน่งสัมบูรณ์ของรูปภาพที่สัมพันธ์กับองค์ประกอบของพาเรนต์
- “ สูงสุด คุณสมบัติ ” ตั้งค่ารูปภาพที่ 100px จากด้านบน
- “ ความกว้าง คุณสมบัติ ” ใช้เพื่อกำหนดความกว้างขององค์ประกอบ div
- “ ความสูง คุณสมบัติ ” ใช้เพื่อกำหนดความสูงขององค์ประกอบ div
- “ ภาพเคลื่อนไหว ” ถูกกำหนดชื่อ cloudanimation2
- “ ระยะเวลาของภาพเคลื่อนไหว ” หมายถึงระยะเวลาของภาพเคลื่อนไหว
- “ ภาพเคลื่อนไหวนับซ้ำ ” ถูกกำหนดเป็นค่าอนันต์ ซึ่งจะวนซ้ำแอนิเมชั่นครั้งไม่สิ้นสุด
ระบุ @keyframes สำหรับ cloudanimation1
@ คีย์เฟรม cloudanimation1 {
ถึง {
ซ้าย: 0px;
}
จาก {
ซ้าย: 100 % ;
}
}
div cloud1 เชื่อมโยงกับภาพเคลื่อนไหวที่อธิบายไว้ด้านล่าง:-
- “ @keyframes cloudanimation1 ” ชื่อของแอนิเมชัน cloudanimation1 ตามด้วยคีย์เวิร์ด @keyframes ซึ่งใช้เพื่อระบุการเปลี่ยนแปลง
- คีย์เวิร์ด @keyframes ระบุวิธีสร้างภาพเคลื่อนไหวตั้งแต่ต้นจนจบบนอิมเมจบนคลาวด์
- “ ถึง ' และ ' จาก ” คำสำคัญระบุว่า cloud1 จะย้ายจาก 100% เป็น 0px ของหน้าจอ
ระบุ @keyframes สำหรับ cloudanimation2
@ คีย์เฟรม cloudanimation2 {
0 % {
ซ้าย: 0 % ;
}
100 % {
ซ้าย: 100 % ;
}
}
div class cloud2 เชื่อมโยงกับภาพเคลื่อนไหวที่อธิบายไว้ด้านล่าง:-
- “ @keyframes cloudanimation2 ” แทนชื่อแอนิเมชัน cloudanimation2 ตามด้วยคีย์เวิร์ด @keyframes ที่ใช้ระบุแอนิเมชัน
- “ 0% ' และ ' 100% ” แสดงจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว
- ที่ 0% ของภาพเคลื่อนไหว เมฆจะอยู่ทางซ้ายโดยมีค่าที่ตั้งไว้เป็น 0% และจะค่อยๆ เลื่อนไปที่ 100% ของความกว้าง
เอาต์พุต
เยี่ยมมาก! เราได้กล่าวถึงวิธีที่เราสามารถระบุแอนิเมชันให้กับองค์ประกอบโดยใช้คีย์เวิร์ด @keyframes ได้สำเร็จบทสรุป
CSS อนุญาตให้เรานำสไตล์ไปใช้กับองค์ประกอบ HTML ภาพเคลื่อนไหวใน CSS ดำเนินการเปลี่ยนจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่ง ประกอบด้วยสององค์ประกอบ สไตล์แอนิเมชัน และคีย์เฟรม สไตล์แอนิเมชั่นแสดงคุณสมบัติต่างๆ เช่น ชื่อ ระยะเวลาของแอนิเมชั่น จำนวนการวนซ้ำของแอนิเมชั่น และอื่นๆ ในขณะที่องค์ประกอบคีย์เฟรมกำหนดจุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว คู่มือนี้อธิบายรายละเอียดเกี่ยวกับวิธีตั้งค่าคีย์เฟรมภาพเคลื่อนไหวพร้อมตัวอย่าง
- เพิ่ม