สร้างแอนิเมชัน CSSคืออะไร?

สร้างแอนิเมชัน CSS ออนไลน์ฟรี สร้างแอนิเมชันคีย์เฟรม CSS ด้วยโปรแกรมแก้ไขภาพ

CSS animation ทำให้อินเทอร์เฟซเว็บมีชีวิตชีวาด้วยการเคลื่อนไหว ผลตอบรับทางภาพ และทรานซิชันที่น่าดึงดูด ตั้งแต่เอฟเฟกต์ hover ที่ละเอียดไปจนถึงตัวบ่งชี้การโหลดที่ดึงดูดความสนใจ แอนิเมชัน keyframe เป็นสิ่งจำเป็นสำหรับการออกแบบเว็บสมัยใหม่ CSS Animation Generator ให้แอนิเมชัน keyframe สำเร็จรูป 10 แบบพร้อมการตั้งค่าช่วงเวลา การผ่อนจังหวะ และการทำซ้ำที่ปรับได้

เลือกจาก bounce, shake, pulse, spin, fade in, slide in left, slide in right, flip, wobble และ swing แอนิเมชันแต่ละแบบมีคำจำกัดความ @keyframes เฉพาะที่จัดการสถานะเริ่มต้น สถานะกลาง และสถานะสิ้นสุด เลือกแอนิเมชันและดูตัวอย่างทันทีบนองค์ประกอบสาธิต

ปรับระยะเวลา (เวลาที่หนึ่งรอบใช้ ตั้งแต่ 0.1s ถึง 10s) ฟังก์ชันการผ่อนจังหวะ (ease, ease-in, ease-out, ease-in-out, linear หรือค่า cubic-bezier แบบกำหนดเอง) การหน่วงเวลา (เวลาก่อนที่แอนิเมชันจะเริ่ม ตั้งแต่ 0s ถึง 5s) จำนวนรอบการทำซ้ำ (1, 2, 3, infinite หรือกำหนดเอง) และทิศทาง (normal, reverse, alternate, alternate-reverse)

ตัวอย่างสดแสดงแอนิเมชันที่เล่นบนองค์ประกอบสาธิต พร้อมโค้ด @keyframes ปัจจุบันที่แสดงควบคู่กับ CSS ทั้งหมด คัดลอกโค้ดแอนิเมชันทั้งหมด — รวมทั้งกฎ @keyframes และคุณสมบัติ animation — ด้วยคลิกเดียว โค้ดที่สร้างขึ้นใช้ไวยากรณ์แบบไม่มี vendor prefix ซึ่งทำงานได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด