CSS Transition Generator
Configure CSS transitions with hover preview.
ทรานซิชัน 1
เลื่อนเมาส์มาที่ฉัน
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}เกี่ยวกับเครื่องมือนี้
เครื่องมือสร้าง CSS Transition ช่วยให้คุณกำหนดค่าคุณสมบัติย่อ transition โดยตั้งค่าคุณสมบัติเป้าหมาย ระยะเวลา ฟังก์ชันเวลา และดีเลย์ ตัวอย่างแบบโต้ตอบช่วยให้คุณดูพฤติกรรมก่อนคัดลอกโค้ด
CSS transition สร้างการเปลี่ยนแปลงสถานะที่ราบรื่นระหว่างสองค่า CSS ที่เปิดใช้งานโดยคลาสเทียม เช่น :hover, :focus หรือการเปลี่ยนแปลงคลาสผ่าน JavaScript
วิธีใช้งาน
- เลือกคุณสมบัติ CSS ที่จะทรานซิชัน (หรือใช้ all)
- ตั้งค่าระยะเวลา — ทรานซิชันใช้เวลานานแค่ไหน (เช่น 0.3s)
- เลือกฟังก์ชันเวลาเพื่อควบคุมเส้นโค้งความเร็ว
- เพิ่มดีเลย์ก่อนเริ่มทรานซิชันหากต้องการ
- เลื่อนเมาส์ไปที่กล่องตัวอย่างเพื่อดูเอฟเฟกต์สด จากนั้นคัดลอก CSS
กรณีการใช้งาน
นักพัฒนาใช้ทรานซิชันสำหรับเอฟเฟกต์ hover ของปุ่ม การซูมการ์ด และการเปลี่ยนสีในลิงก์นำทาง นักออกแบบฟอร์มใช้สำหรับสไตล์โฟกัส
คำถามที่พบบ่อย
- ความแตกต่างระหว่าง transition และ animation คืออะไร? — Transition ตอบสนองต่อการเปลี่ยนแปลงสถานะ (เช่น hover); animation รันอัตโนมัติหรือวนซ้ำโดยใช้ keyframe
- สามารถทรานซิชันหลายคุณสมบัติได้ไหม? — ได้ คลิก "เพิ่มทรานซิชัน" เพื่อเพิ่มกฎคุณสมบัติหลายรายการที่คั่นด้วยจุลภาค
- คุณสมบัติใดที่สามารถทรานซิชันได้? — คุณสมบัติส่วนใหญ่ที่มีค่าตัวเลข: opacity, color, transform, ขนาด เป็นต้น คุณสมบัติเช่น display ไม่สามารถทรานซิชันได้