CSS Keyframe Generator
Magsimula sa talon, ikot, pulso, pag-uga o fade, saka i-edit ang frame. Play ang nagsisimula ng preview; pareho ang frame value at interval easing sa CSS.
Mga keyframe
2–20 natatanging offset, kasama ang 0% at 100%. Translate → rotate → scale ang ayos. Naka-sort ayon sa offset ang output.
Nagsisimula lang kapag pinindot ang Play. Maaari itong ihinto; sample lang ang naaapektuhan.
Paano gamitin
Paano gamitin
- Pumili ng preset o mag-edit ng 2–20 natatanging frame kasama ang 0% at 100%.
- Itakda ang tagal, delay, easing, ulit, direksiyon at fill mode; i-play o i-pause.
- Kopyahin o i-download ang CSS at ilapat ang animated-element class sa elemento.
Nae-edit na frame
May offset, pahalang/patayong galaw, ikot, scale at opacity ang bawat frame. Naka-sort ang offset at kailangan ang endpoints. Galaw ±500px, ikot ±3600deg, scale 0–5, opacity 0–1. Hindi ito editor para sa anumang CSS property o maraming elemento sa timeline.
Timing at preview
Tagal 0.1–60s, delay 0–60s, 1–100 ulit o infinite. Limang standard easing o custom cubic-bezier, at apat na direction/fill mode. Lokal na Web Animations ang preview; nagsisimula sa Play, humihinto kapag hidden ang page, at puwedeng i-pause o ihinto. Maaaring ma-clip ang hugis sa preview area.
Plain CSS output
Walang upload o dependency. Keyframes at class lang, walang HTML. Palitan ang parehong pangalan kapag pinagsasama at suriin ang galaw para sa audience; walang awtomatikong reduced-motion rule sa export.
Mga madalas itanong
Maaari mo ring alamin
Maaari bang baguhin ang bawat frame?
Oo. Magdagdag, magtanggal o baguhin ang transform at opacity sa unique offset. Panatilihin ang 0% at 100%.
Awtomatiko bang nagpe-play?
Hindi. Pindutin ang Play. Habang nagpe-play, valid edit ang nagre-restart; kung paused o stopped, hindi ito magsisimula sa edit.