ความแตกต่างระหว่างการเปลี่ยน CSS3 ฯease-in, ease-outฯลฯ ?
คำตอบ:
การเปลี่ยนและภาพเคลื่อนไหวของ CSS3 รองรับการค่อยๆเปลี่ยนซึ่งเรียกอย่างเป็นทางการว่า "ฟังก์ชันจับเวลา" คนทั่วไปจะease-in, ease-out, ease-in-out, easeและlinear, cubic-bezier()หรือคุณสามารถระบุคุณเองโดยใช้
ease-in จะเริ่มภาพเคลื่อนไหวอย่างช้าๆและจบด้วยความเร็วสูงสุดease-out จะเริ่มแอนิเมชั่นด้วยความเร็วเต็มที่จากนั้นจะจบอย่างช้าๆease-in-out จะเริ่มอย่างช้าๆเร็วที่สุดที่ตอนกลางของภาพเคลื่อนไหวจากนั้นจบอย่างช้าๆeaseเป็นเหมือนease-in-outยกเว้นว่าจะเริ่มเร็วกว่าที่จะสิ้นสุดเล็กน้อยlinear ไม่ใช้การค่อยๆเปลี่ยนcubic-bezierไวยากรณ์ แต่โดยปกติแล้วจะไม่จำเป็นเว้นแต่คุณจะต้องการเอฟเฟกต์ที่แม่นยำมากโดยทั่วไปการค่อยๆเปลี่ยนคือการทำให้ช้าลงเพื่อหยุดการค่อยๆเปลี่ยนคือการเร่งความเร็วอย่างช้าๆและการค่อยๆเปลี่ยนคือการไม่ทำทั้งสองอย่าง คุณสามารถค้นหาแหล่งรายละเอียดเพิ่มเติมได้ที่เอกสารtiming-functionใน MDN
และหากคุณต้องการเอฟเฟกต์ที่แม่นยำดังที่กล่าวมา Cub-bezier.com ของ Lea Verou ก็พร้อมให้คุณแล้ว! นอกจากนี้ยังมีประโยชน์สำหรับการเปรียบเทียบฟังก์ชันการจับเวลาต่างๆในรูปแบบกราฟิก
อีกระยะเวลาการทำงานที่ทำหน้าที่เหมือนแต่ดำเนินการจำนวน จำกัด ของขั้นตอนระหว่างการเริ่มต้นการเปลี่ยนแปลงและสิ้นสุด มีประโยชน์มากที่สุดสำหรับฉันในแอนิเมชั่น CSS3 มากกว่าในช่วงการเปลี่ยนภาพ ตัวอย่างที่ดีคือในการโหลดตัวบ่งชี้ที่มีจุด ตามเนื้อผ้าหนึ่งใช้ชุดของภาพนิ่ง (พูดแปดจุดสองเปลี่ยนสีแต่ละเฟรม) เพื่อสร้างภาพลวงตาของการเคลื่อนไหว ด้วยภาพเคลื่อนไหวและการแปลงร่างคุณกำลังใช้การเคลื่อนไหวเพื่อสร้างภาพลวงตาของเฟรมแยก! สนุกอย่างไร.steps()linearsteps()steps(8)rotate