สร้างเส้นโค้งภาพเคลื่อนไหวที่ซับซ้อนใน CSS ด้วยฟังก์ชันการค่อยๆ เปลี่ยน linear()

ขอแนะนำ linear() ซึ่งเป็นฟังก์ชันการค่อยๆ เปลี่ยนใน CSS ที่ประมาณค่าเชิงเส้นระหว่างจุดต่างๆ ทำให้คุณสร้างเอฟเฟกต์การดีดตัวและสปริงขึ้นมาใหม่ได้

Bramus

การเปลี่ยนภาพใน CSS

เมื่อสร้างภาพเคลื่อนไหวหรือเปลี่ยนองค์ประกอบใน CSS คุณจะควบคุมอัตราที่ค่าเปลี่ยนแปลงได้ด้วยฟังก์ชันการค่อยๆ เปลี่ยนโดยใช้พร็อพเพอร์ตี้ animation-timing-function และ transition-timing-function

มีคีย์เวิร์ดหลายคำที่พร้อมใช้งานเป็นค่าที่กำหนดล่วงหน้าใน CSS ได้แก่ linear, ease, ease-in, ease-out และ ease-in-out หากต้องการสร้างเส้นโค้งการค่อยๆ เปลี่ยนของคุณเอง ให้ใช้ฟังก์ชัน cubic-bezier() หรือใช้แนวทางแบบขั้นโดยใช้ฟังก์ชันการค่อยๆ เปลี่ยน steps()

เมื่อใช้อย่างเหมาะสม การเปลี่ยนค่าจะทำให้องค์ประกอบเคลื่อนไหวมีความรู้สึกถึงน้ำหนักเมื่อดูเหมือนว่าองค์ประกอบนั้นกำลังรวบรวมโมเมนตัม

การสร้างเส้นโค้งที่ซับซ้อน เช่น เอฟเฟกต์การดีดตัวหรือสปริง ไม่สามารถทำได้ใน CSS แต่ตอนนี้คุณสามารถประมาณค่าได้อย่างน่าทึ่งด้วย linear()

ข้อมูลเบื้องต้นเกี่ยวกับ linear()

วิธีใหม่ในการกำหนดการค่อยๆ เปลี่ยนใน CSS คือการใช้ linear() ฟังก์ชันนี้ยอมรับจำนวนป้ายรถเมล์ที่คั่นด้วยคอมมา แต่ละจุดคือตัวเลขเดียวที่มีค่าตั้งแต่ 0 ถึง 1 ระหว่างจุดหยุดแต่ละจุด การประมาณค่าจะดำเนินการในลักษณะเชิงเส้น ซึ่งอธิบายชื่อของฟังก์ชัน

animation-timing-function: linear(0,