Preskoči na sadržaj
TextArray1.87.0
100% lokalno

Generator CSS keyframes

Pretvori korake percent;property:value u @keyframes blok i njegovu skraćenu animaciju.

Unos
Rezultat
Slični alati
CSS generator gradijenataAlati za programere
Generator CSS sjene kutijeAlati za programere
Generator CSS gridaAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
Generator CSS keyframes
Zalijepite korake keyframea kao percent;property:value — jedan redak po zaustavci, primjerice 0;opacity:0 nakon čega slijedi 100;opacity:1 — i ovaj alat sastavlja potpuni @keyframes blok zajedno s odgovarajućom skraćenom deklaracijom animacije. Dodajte više parova property:value na istu liniju, odvojene točkozrezima, kako biste animirali više od jednog svojstva na toj zaustavci, i ponovno koristite postotak na više linija kako biste nastavili dodavati svojstva.
Odaberite predložak — fade, slide, pulse, shake ili bounce — kako biste preskočili pisanje koraka ručno i dobili gotovu animaciju sa svim opcijama još uvijek prilagodljive, ili prebacite predložak na prilagođeno kako biste vozili svaku zaustavcu iz vlastitog unosa. Preostale opcije oblikuju skraćenu animaciju: naziv postavlja identifikator koji dijele @keyframes pravilo i deklaracija animacije, trajanje i kašnjenje su u sekundama, a funkcija vremenske progresije pokriva svaki standardni ključni pojam plus prilagođenu cubic-bezier() krivulju za točan oblik ubrzanja. Postavite animaciju da se ponavlja fiksni broj puta ili uključite beskonačnu, odaberite smjer (normalno, obrnuto, naizmjeničan, obrnuto naizmjeničan) i način ispunjenja za što se desiti prije i nakon što se pokreće, te uključite opciju webkit prefiksa kako biste tudi emitirali @-webkit-keyframes blok i -webkit-animation redak za starije verzije Safarija i Android WebViewa.
Vrijednosti postotka izvan 0–100 se stegnu u raspon, "from" i "to" se prihvaćaju kao pseudonimi za 0 i 100, te se prazni ili loše oblikovani redaci preskačou umjesto da prekinu izlaz. Brojač ispod izlaza izvještava koliko je keyframe zaustavci generirano i točan broj znakova.
Svečanica se vrtit lokalno u vašem pregledniku dok tipkate — nikada se CSS ili animacijski podaci ne pošilaju na poslužitelj. Kopirajte rezultat, preuzimite kao .txt datoteku, ili pošilite izlaz natrag u unos kako biste nastavili usavršavati korake.
FAQ
Kako zapravo izgleda format unosa?
Jedan redak po zaustavci keyframea: postotak, točkozrez, zatim property:value. Dodajte više parova property:value na istu liniju, svaki odvojen točkozrezom, kako biste animirali nekoliko svojstava odjednom — primjerice 50;opacity:0.5;transform:scale(1.1).
Što se dogodi kada odaberem predložak poput fade ili bounce?
Alat koristi ugrađeni skup keyframe koraka za taj predložak i ignora što god je u polju unosa, dok sve ostale opcije — naziv, trajanje, vremenska progresija, smjer i tako dalje — i dalje vrijede. Prebacite na prilagođeno kako biste ponovno koristili svoj unos.
Kako mogu dobiti točnu prilagođenu krivulju ubrzanja?
Postavite vremensku progresiju na prilagođenu i unesite četiri brojna odvojena zarezima u polje cubic-bezier, primjerice 0.25, 0.1, 0.25, 1. Nevaljana vrijednost se vraća na ease umjesto da proizvede neispravan CSS.
Koja je razlika između broja ponavljanja i beskonačnog?
Broj ponavljanja postavlja koliko puta se animacija predvaja prije nego što se zaustavi. Uključivanje beskonačnog prebacuje to i ponavlja animaciju beskonačno.
Jesu li moji animacijski podaci negdje učitani?
Ne. @keyframes blok i skraćena animacija se kreiraju potpuno u vašem pregledniku — ništa što tipkate nikada ne napušta vašu napravu.