สีและการออกแบบ
ตัวสร้างแอนิเมชั่น CSS
Build keyframes visually, copy ready-to-paste CSS.
หมายเหตุจากบรรณาธิการ
Understanding · Keyframes, timing, and what runs on the GPU.
บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล
คำถามที่พบบ่อย
Quick answers.
›Does the generator use external libraries?
No. It outputs pure CSS keyframes and `animation` properties that work natively in all modern browsers without any dependencies.
›What is the difference between ease-in and ease-out?
The `ease-in` function starts the animation slowly and speeds up at the end, while `ease-out` starts quickly and decelerates at the end.
›Can I animate any CSS property?
The tool focuses on the most common animatable properties like `transform`, `opacity`, and `background-color`. These properties are generally more performant as they avoid triggering browser layout recalculations.
›How do I make an animation loop forever?
Set the `animation-iteration-count` property to `infinite`. This is a standard option in the duration and timing configuration panel.
ผู้คนยังค้นหา
เครื่องมือที่เกี่ยวข้อง
More in this room.
- ตัวสร้าง Gradientสร้าง CSS gradient แบบ linear, radial และ conic
- ตัวสร้าง Box Shadowตัวแก้ไข CSS box-shadow แบบภาพ
- ตัวสร้าง Border Radiusตัวแก้ไข CSS border-radius แยกแต่ละมุม
- ตัวแก้ไข Cubic Bezierออกแบบเส้นโค้ง Easing ของ CSS ด้วยภาพ
- ตัวสร้างตัวกรอง CSSดูตัวอย่างสด blur, brightness, hue-rotate และอื่นๆ
- เครื่องมือสร้าง Glassmorphismการ์ด UI ลายแก้วฝ้าพร้อม backdrop-filter