ตัวสร้าง CSS @starting-style
สร้าง enter animation ด้วย @starting-style ออนไลน์ฟรี สำหรับ popover, dialog และ display:none พร้อมค่าเริ่มต้น opacity/transform, allow-discrete และพรีวิวสด
Loading tool...
ตัวสร้าง CSS @starting-style คืออะไร?
ตัวสร้าง CSS @starting-style สร้าง enter animation ให้ element ขณะปรากฏด้วยกฎ @starting-style สมัยใหม่ เลือกเป้าหมาย popover, dialog หรือ display:none กำหนด opacity และ transform เริ่มต้น ปรับ duration กับ easing แล้วได้ block ครบชุดที่มี transition display และ overlay แบบ allow-discrete พร้อมพรีวิวสดที่เล่น animation ซ้ำให้ดู
ประโยชน์หลัก
- entry animation แบบ CSS ล้วน ไม่ต้องจับเวลาด้วย JavaScript
- จัดการ top-layer ถูกต้องด้วย transition allow-discrete
- selector ถูกต้องสำหรับ popover, dialog และ element ที่ซ่อน
- พรีวิวสดเล่น transition ซ้ำขณะปรับค่า
- ผลลัพธ์คัดลอกวางได้ พรีวิวเป็นส่วนตัวและทันที
กรณีการใช้งาน
- •animate popover และเมนูที่เปิดด้วย Popover API
- •เพิ่ม open animation ให้ dialog element ดั้งเดิม
- •ทำให้เนื้อหาที่สลับด้วย display:none ปรากฏนุ่มนวลขึ้น
- •เรียนรู้ pattern entry transition ของ CSS สมัยใหม่จากตัวอย่าง
วิธีสร้าง block @starting-style
- เลือกประเภท element: เลือก popover, dialog หรือ element ธรรมดาที่ซ่อนด้วย display:none
- ตั้งสไตล์เริ่มต้น: เลือก opacity และ transform เริ่มต้นที่ element จะ animate ออกจาก
- ปรับจังหวะ: เลือก duration และ easing พร้อมดูพรีวิวสดเล่น transition ซ้ำ
- คัดลอก CSS: คัดลอก block @starting-style พร้อมกฎ transition หรือดาวน์โหลดเป็นไฟล์ CSS
คุณสมบัติหลัก
- enter transition สำหรับ popover, dialog และ display:none
- มี transition display และ overlay แบบ allow-discrete ให้
- เลือก opacity และ transform เริ่มต้น เห็นผลสด
- ปรับ duration และ easing รวมถึง cubic-bezier
- พรีวิวสด remount เพื่อเล่น animation ซ้ำ
- คัดลอกหรือดาวน์โหลด CSS block ที่เสร็จแล้ว