หยุดการเคลื่อนไหวของ CSS และ Loop ด้วย WAIT! มีชีวิต

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

แต่ด้วยเครื่องมือฟรีเช่น รอ! มีชีวิต คุณทำได้จริง สร้างภาพเคลื่อนไหวแบบวนลูปตั้งแต่เริ่มต้น กับ ความล่าช้าที่กำหนดเอง ระหว่างแต่ละวง นี่อาจดูเหมือนเป็นงานที่ธรรมดา แต่ก็สามารถแก้ปัญหาความเจ็บปวดสำหรับนักพัฒนาหลายคนได้.

ควรสังเกตว่ามีคุณสมบัติ CSS ที่เรียกว่า ภาพเคลื่อนไหวล่าช้า ที่ ความล่าช้า เริ่มต้น ของภาพเคลื่อนไหว CSS. อย่างไรก็ตามมัน ไม่ส่งผลต่อภาพเคลื่อนไหวที่เกิดซ้ำ ตามที่มันล่าช้าเพียงจุดเริ่มต้น.

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

เว็บแอปนี้สามารถ ทำงานกับคุณสมบัติภาพเคลื่อนไหว CSS3 ใด ๆ, รวมถึงการหมุนและการแปลง คุณไม่ได้เขียนคุณสมบัติ CSS ใหม่ แต่อย่างใด การสร้างคุณลักษณะด้านบนของคีย์เฟรม เพื่อสร้าง หยุดชั่วคราวตามเปอร์เซ็นต์ (จาก 0% ถึง 100%) ภายในภาพเคลื่อนไหว.

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

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

หากคุณต้องการโซลูชันที่ง่ายกว่านอกสถานที่คุณสามารถทำได้ ดาวน์โหลด Sass mixin. นี่มันช่างยากขึ้นเพราะ มันต้องใช้แผนที่ Sass, ดังนั้นคุณจะต้องเข้าใจวิธีการเพิ่มคุณสมบัติที่กำหนดเองและเขียนไวยากรณ์ของคุณอย่างถูกต้อง.

นี่คือตัวอย่างของวิธีการที่คุณจะ เรียก mixin:

 @include waitAnimate ((animationName: animName, คีย์เฟรม: (0: (แปลง: สเกล (1), สีพื้นหลัง: สีน้ำเงิน)), 50: (เปลี่ยนเป็นสเกล: 2, พื้นหลังสี: สีเขียว), 100: (แปลง : scale (3), พื้นหลังสี: สีแดง)), ระยะเวลา: 2, waitTime: 1, timingFunction: ง่ายดาย, iterationCount: infinite)); 

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

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

มันเป็นแฮ็คที่สนุกจริงๆที่ค่อนข้างคลุมเครือด้วยการออกแบบ แต่มันจะแสดงให้เห็นว่า CSS3 นั้นมีความเป็นไปได้มากน้อยเพียงใด.