Generator keyframe animacija – CSS @keyframes uživo
Generator CSS keyframe animacija izrađuje @keyframes blok i pripadajući skraćeni zapis animacije iz odabranog svojstva i postavki animacije. Odaberite translate, rotate, scale, opacity ili background, zatim unesite početne i krajnje vrijednosti, trajanje, vremenski tok i broj ponavljanja. Pregled uživo prikazuje animaciju dok prilagođavate postavke, a generirane vrijednosti možete kopirati.
Generator CSS keyframe animacija izrađuje @keyframes blok i skraćeni zapis animacije iz postavki koje odaberete. Odaberite translate, rotate, scale, opacity ili background kao animirano svojstvo, unesite početne i krajnje vrijednosti te postavite trajanje, vremenski tok i broj ponavljanja. Pregled uživo omogućuje da vidite rezultirajuću animaciju dok radite.
Pretvorba koristi te postavke za pisanje definicije keyframesa i pripadajućeg skraćenog zapisa animacije. Odabrano svojstvo određuje što se mijenja između početne i završne vrijednosti; trajanje, vremenski tok i broj ponavljanja oblikuju način izvođenja animacije. Generirane vrijednosti koje su vam potrebne za CSS možete kopirati.
CSS keyframesi opisuju promjene između stanja animacije, dok skraćeni zapis animacije objedinjuje postavke animacije u jednu deklaraciju. Generiranje oboje može pomoći pri prototipiranju kretanja, pripremi testnih podataka ili dodavanju animacije u tablicu stilova. Pregled omogućuje brz uvid u rezultat prije kopiranja koda.
Alat u cijelosti radi u vašem pregledniku. Vaš unos obrađuje se na vašem uređaju i ne šalje se na poslužitelj. Radi izvan mreže nakon što se stranica učita, pa ga možete nastaviti koristiti bez veze; alat je besplatan.
Ovaj generator koristan je programerima svih razina iskustva koji žele izraditi ili pregledati vrijednosti CSS animacija. Može pomoći i DevOps inženjerima i timovima koji pripremaju fixture ili početne podatke koji uključuju kôd keyframe animacija.
Korak 1: Odaberite svojstvo animacije: translate, rotate, scale, opacity ili background. To određuje koju vrstu promjene generirani keyframesi opisuju.
Korak 2: Postavite početne (from) i krajnje (to) vrijednosti za odabrano svojstvo. Te vrijednosti određuju početno i završno stanje animacije.
Korak 3: Odaberite trajanje, vremenski tok i broj ponavljanja. Generirani skraćeni zapis animacije odražava te postavke.
Korak 4: Generirajte CSS i provjerite pregled uživo kako biste vidjeli rezultat.
Korak 5: Kopirajte @keyframes blok, skraćeni zapis animacije ili druge generirane vrijednosti koje su vam potrebne.
Primjer upotrebe: Izradite spremne vrijednosti keyframe animacija za testove, fixture ili početne podatke, a zatim kopirajte generirani CSS u svoj projekt.
Primjer upotrebe: Generirajte cijelu seriju vrijednosti animacija odjednom umjesto da ih izmišljate ručno.
Primjer upotrebe: Dobijte pravilno nasumične vrijednosti umjesto da se oslanjate na nagađanja utipkana na tipkovnici.
Primjer upotrebe: Pregledajte CSS animaciju dok birate njezino svojstvo i početne/krajnje vrijednosti, kako biste provjerili rezultat prije kopiranja koda.
Primjer upotrebe: Izgradite @keyframes blok i skraćeni zapis animacije za prototip korisničkog sučelja bez pisanja oba dijela od nule.
Primjer upotrebe: Pripremite kôd animacije za tablicu stilova generiranjem keyframesa i skraćenog zapisa zajedno.