โฮมเพจ » ออกแบบเว็บไซต์ » หยุดการเคลื่อนไหวของ CSS และ Loop ด้วย WAIT! มีชีวิต

    หยุดการเคลื่อนไหวของ 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 นั้นมีความเป็นไปได้มากน้อยเพียงใด.