⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

CSS Keyframe -animaatiogeneraattori

Rakenna oikeita @keyframes-animaatioita moniraitan aikajanalla – muunto-, läpinäkyvyys- ja taustaväripysähdyskohdat raitaa kohden – vedettävällä osoittimella, joka näyttää tarkan interpoloidun välitilan animaatiosta.

🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.

Klikkaa mitä tahansa kohtaa kaistalla lisätäksesi sinne pysähdyskohdan. Raahaa pysähdyskohtaa siirtääksesi sitä tai muokkaa sen prosentti- ja arvokenttiä kaistan alapuolella. Tuplaklikkaa pysähdyskohtaa poistaaksesi sen (vähintään 2 raitaa kohti).

Käsitellään... 0%

Tulos

CSS @keyframes -sääntö on oikeastaan pieni aikajana: joukko prosentuaalisia tarkistuspisteitä, joista jokainen ilmoittaa, miltä ominaisuuden tulisi näyttää juuri sillä hetkellä, ja selain interpoloi kaiken siltä väliltä. Käsin rakentaessa joutuu pitämään useita tällaisia prosenttipisteitä mielessään yhtä aikaa useiden ominaisuuksien osalta – tämä generaattori muuttaa tuon aikajanan konkreettiseksi näkymäksi, jota voi katsella ja raahata: yksi vaakasuora kaista jokaista ominaisuutta kohti ja pysähdysmerkki jokaisessa tarkistuspisteessä.

Keskiössä on selausosoitin. Raahaa se mihin tahansa kohtaan 0 %:n ja 100 %:n välillä, ja esikatselulaatikko hyppää täsmälleen sitä hetkeä vastaavaan yhdistettyyn tilaan – ei lähimpään avainkehykseen, vaan aitoon lineaarisesti interpoloituun arvoon, joka lasketaan kullakin aktiivisella raidalla osoitinta ympäröivien kahden pysähdyskohdan välillä. Numeeriset ominaisuudet, kuten sijainti, kierto ja skaalaus, interpoloidaan tavallisina numeroina; taustaväri interpoloidaan jokaiselle punaiselle, vihreälle ja siniselle kanavalle erikseen, minkä ansiosta väriraidan häivytys liukuu pehmeästi välisävyjen kautta hyppimättä ainoastaan asetettujen värien välillä.

Useat raidat yhdistyvät automaattisesti yhdeksi yhtenäiseksi animaatioksi: jokainen muunto-ominaisuus (siirto, kierto, skaalaus) sulautuu yhdeksi transform-määrittelyksi jokaisessa avainkehysprosentissa, kun taas läpinäkyvyys ja taustaväri pysyvät omilla riveillään, aivan kuten aidossa käsin kirjoitetussa CSS:ssä. Prosenttikohdat, joissa tietyllä raidalla ei ole erikseen asetettua pysähdyskohtaa, jätetään tarkoituksella pois kyseisen ominaisuuden määrittelyistä – selaimen oma avainkehysinterpolointi täyttää aukon olemassa olevien pysähdyskohtien välillä, samalla tavalla kuin missä tahansa itse kirjoitetussa @keyframes-säännössä.

Viisi esiasetusta – pomppu, tärinä, syke, häivytys ja liuku sisään – lataavat kokonaisen, muokattavissa olevan aikajanan (sisältäen järkevän keston, ajoitusfunktion ja toistomäärän) yhdellä klikkauksella. Paina Toista milloin tahansa nähdäksesi todellisen CSS-animaation esikatseluelementissä, joka luodaan lennosta dynaamisesti lisätyn tyylisivun kautta, ja kopioi sitten koko @keyframes-lohko sekä .animated-element { animation: ... } -lyhennys suoraan omaan projektiisi. Kuten kaikki muutkin tämän sivuston työkalut, tämä toimii täysin paikallisesti selaimessa eikä mitään koskaan ladata palvelimelle.

Nautitko tästä työkalusta? Onko tämä tuote mielestäsi hyödyllinen? Näetkö siinä potentiaalia ja haluat tukea sitä?

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely tapahtuu täysin offline-tilassa. 100 % turvallista.

Hyväksytyt muodot ja säännöt

  • Moniraitainen aikajana muunnolle (translateX, translateY, rotate, scale), läpinäkyvyydelle ja taustavärille, jokaisella omat vedettävät pysähdyskohtansa.
  • Aito lineaarinen interpolointi – numeeriset ominaisuudet ja värikanavakohtainen RGB väreille – ohjaa raitojen pysähdyskohtien välistä esikatselua.
  • Toista-painike lisää todellisen luodun @keyframes-CSS:n esikatseluun dynaamisesti lisätyn tyylisivun kautta, ja lisäksi kopioitavissa on koko @keyframes- ja animation-lyhennystulos.

Keskeiset hyödyt

✓ Vedettävä osoitin näyttää todellisen interpoloidun välitilan animaatiosta – ei hyppäystä avainkehysten välillä – aivan kuten selain sen todellisuudessa renderöisi.
✓ Jokainen ominaisuus toimii omalla raidallaan ja omilla pysähdyskohdillaan, joten pomppu, värinvaihto ja häivytys voivat toimia samassa elementissä yhtä aikaa ilman ristiriitoja.
✓ Viisi valmista esiasetusta (pomppu, tärinä, syke, häivytys, liuku sisään) antavat toimivan lähtökohdan yhdellä klikkauksella, ja sen jälkeen jokaista pysähdyskohtaa voi muokata vapaasti.

Käyttötapaukset

  • • Vedä kelauspää mihin tahansa kohtaan pomppu- tai sykintäanimaatiossa nähdäksesi tarkan, interpoloidun välitilan ennen CSS:n julkaisua.
  • • Yhdistele translateX-raita ja läpinäkyvyysraita luodaksesi aidon liusu-ja-häivy -sisääntuloanimaation ja kopioi sitten koko @keyframes + animation -lyhennemuoto.
  • • Lisää taustaväriraita skaalausraidan viereen animoidaksesi painikkeen väriä ja kokoa yhdessä ja katso värikanavien sulautumista livenä liikuttamalla kelauspäätä.