วิธีสร้างแอนิเมชั่นสีพื้นหลังวนซ้ำอย่างง่ายด้วย CSS

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

ในตัวอย่างนี้ เรากำลังกำหนดเป้าหมาย HTML <body> องค์ประกอบโดยตรงกับ CSS แต่คุณสามารถใช้ตัวอย่างโค้ดต่อไปนี้กับองค์ประกอบ HTML คลาสหรือ ID

วิธีสร้างแอนิเมชั่นสีพื้นหลังวนซ้ำอย่างง่ายด้วย CSS

The Code

คุณสามารถใช้การสาธิตนี้เป็นข้อมูลอ้างอิงได้

หมายเหตุ:รหัสนี้ใช้ไม่ได้ใน IE9

การวางแผนแอนิเมชั่นของคุณ

แม้ว่าคุณจะไม่ทราบแน่ชัดว่าผลลัพธ์ของคุณควรจบลงอย่างไร การมีแนวคิดเกี่ยวกับทิศทางที่คุณจะไปนั้นก็เป็นประโยชน์เสมอ มาสร้างบางสิ่งเกี่ยวกับแอนิเมชั่นวนรอบก่อนที่เราจะเริ่มเขียนโค้ด:

เราต้องการใช้สีพื้นหลังกี่สี
อนิเมชั่นทั้งหมดควรมีระยะเวลานานเท่าใด
ควรใช้แอนิเมชั่นประเภทใด

เนื่องจากจุดประสงค์ของบทช่วยสอนนี้คือเพื่อให้สิ่งต่าง ๆ เรียบง่าย ลองใช้:

5 สีพื้นหลังที่แตกต่างกัน
ระยะเวลา 10 วินาที (แต่ละสีจะแสดง 2 วินาที)
เส้นโค้งภาพเคลื่อนไหวเชิงเส้น (ภาพเคลื่อนไหวมีความเร็วเท่ากันตั้งแต่ต้นจนจบ)

ฉันใช้ Coolers.co เพื่อสร้างจานสีที่กลมกลืนกันอย่างรวดเร็วสำหรับตัวอย่างนี้:

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

พระอาทิตย์ตกสีส้ม:#EE6055
สีน้ำเงินเข้มปานกลาง:#60D394
สีเขียวซีด:#AAF683
เหลืองกลมกล่อม:#FFD97D
ส้มเขียวหวานสดใส:#FF9B85

คุณไม่จำเป็นต้องจำชื่อเหล่านั้นทั้งหมด (ชื่อเหล่านี้นำมาจาก Coolers โดยตรง) ฉันเพิ่งเพิ่มชื่อเหล่านี้เพื่อการวัดที่ดี

เอาล่ะ ตอนนี้เรามี 5 สีแล้ว เราจะใส่แอนิเมชั่นวนรอบที่แสดงแต่ละสีเป็นเวลา 2 วินาที

ต่อไปเราจะสร้างแอนิเมชั่นตามแผนของเรา

การสร้างภาพเคลื่อนไหว CSS แบบวนซ้ำ

ใน CSS คีย์เฟรมของภาพเคลื่อนไหวทำงานเป็นเปอร์เซ็นต์ตั้งแต่ 0% เป็น 100% . เพิ่ม คีย์เฟรม CSS ต่อไปนี้ ไปยังสไตล์ชีตของคุณ:

/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

ตอนนี้เรามีคุณสมบัติคีย์เฟรมชื่อ backgroundColorPalette ด้วยช่วงสี 5 ช่วง ซึ่งแบ่งเท่าๆ กันจาก 0% เป็น 100% ของแอนิเมชั่น

ตอนนี้ก็ถึงเวลาสร้างชุดกฎ CSS ขององค์ประกอบเนื้อหา เพื่อให้เราสามารถนำจานสีของคีย์เฟรมของเราไปใช้ได้

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

body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

เดอะโค้ด

คุณสามารถใช้การสาธิตนี้เป็นข้อมูลอ้างอิง

วิธีการทำงานของ CSS

ขั้นแรก เราเพิ่ม animation-name คุณสมบัติและให้ค่าของ backgroundColorPalette — ตอนนี้คีย์เฟรมสีพื้นหลังที่เราสร้างไว้ก่อนหน้านี้ถูกกำหนดให้กับองค์ประกอบเนื้อหาแล้ว
เราใช้ animation-duration: คุณสมบัติและให้มูลค่า 10 วินาที — ตอนนี้ระยะเวลารวมของแอนิเมชั่นของเราคือ 10 วินาที คุณยังสามารถใช้มิลลิวินาที 10000 .
เราใช้ animation-iteration-count ให้มีค่า infinite . นี่คือสิ่งที่ทำให้แอนิเมชั่นวนซ้ำอย่างต่อเนื่อง ใน CSS ค่าเริ่มต้นคือ 1 วงจรแอนิเมชั่น
เราใช้ animation-direction คุณสมบัติและให้ค่า alternate . สิ่งนี้ทำให้แอนิเมชั่นเล่นตั้งแต่ต้นจนจบและตั้งแต่ต้นจนจบ เราใช้ค่าคุณสมบัตินี้เพื่อหลีกเลี่ยงการกระโดดที่น่าเกลียดซึ่งเกิดขึ้นหากคุณใช้ normal ค่าทิศทางของภาพเคลื่อนไหว

นานาน่ารู้

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

อย่างไรก็ตาม คุณยังอาจต้องการเพิ่ม animation-timing-function: linear; กับชุดกฎ CSS ของคุณเพื่อทำให้โค้ดมีความชัดเจนยิ่งขึ้น โดยเฉพาะอย่างยิ่งถ้าคุณทำงานเป็นทีม เป็นการยากที่จะจดจำว่าค่าคุณสมบัติทั้งหมดเปิดใช้งานโดยค่าเริ่มต้นใน CSS