วิธีใช้ CSS Animation เพื่อหมุนรูปภาพอย่างต่อเนื่อง

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

อันดับแรก เราต้องการมาร์กอัป HTML ที่มีรูปภาพและแอตทริบิวต์บางอย่าง:

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

ภาพของคุณควรปรากฏดังนี้:

อย่างที่คุณเห็นองค์ประกอบรูปภาพของเรามีสามคลาส rotate , linear และ infinite . ในสไตล์ชีต CSS ของเรา เราต้องสร้างบล็อกการประกาศสำหรับแต่ละคลาส คลาสประเภทนี้บางครั้งเรียกว่า utility หรือ ตัวช่วย ชั้นเรียน แต่ฉันชอบคำว่า วัตถุประสงค์เดียว เพราะมันอธิบายได้มากกว่า

ขั้นแรกให้ประกาศ .rotate บล็อคโค้ด:

.rotate {
  animation: rotation 2s;
}

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

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

ตอนนี้ หากคุณโหลดแท็บเบราว์เซอร์ซ้ำ คุณจะเห็นภาพหมุนครั้งเดียวใน 2 วินาที (2s ). แต่เราต้องทำอีกสองสิ่ง เราต้องการให้รูปภาพหมุนอย่างต่อเนื่อง และเราต้องการเปลี่ยนระยะเวลาการเปลี่ยนภาพเคลื่อนไหวจากค่าเริ่มต้น ease เป็นเส้นโค้งความเร็วสม่ำเสมอ เรียกว่า linear .

เพิ่ม .linear . นี้ บล็อกการประกาศไปยังสไตล์ชีต CSS ของคุณ:

.linear {
  animation-timing-function: linear;
}

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

สุดท้ายนี้ มาทำให้ภาพของเราหมุนไปเรื่อย ๆ โดยการประกาศ .infinite . ของเรา บล็อกรหัสของชั้นเรียน:

.infinite {
  animation-iteration-count: infinite;
}

ว้าว ตอนนี้คุณมีภาพที่หมุนได้ไม่สิ้นสุด/ต่อเนื่องด้วยเส้นโค้งความเร็วของแอนิเมชั่นเชิงเส้น

ตรวจสอบรหัสที่สมบูรณ์ใน CodePen

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

.rotate-image {
  animation: rotation 2s linear infinite;
}

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

มีแอนิเมชั่นเส้นโค้งมากมายข้าง ease . เริ่มต้น และ linear ที่เราใช้ที่นี่ คุณสามารถจินตนาการได้มากโดยใช้ cubic-bezier เส้นโค้งภาพเคลื่อนไหว แต่ฉันจะบันทึกไว้สำหรับบทช่วยสอนอื่น