Rakenna viileitä CSS-animaatioita helposti Animistan avulla

On tonnia CSS-animaatio-web-sovelluksia verkossa. Mutta hyvin harvat vertaavat yksityiskohtia ja helppokäyttöisyyttä Animista.

Tämä ilmainen web-sovellus antaa sinulle mahdollisuuden luo mukautettuja CSS-animaatioita yhdellä painalluksella. Voit valita ennalta suunniteltujen liikkeiden, kuten dioja, muunnoksia, keinuja ja jopa varjohäviöitä, välillä.

Kun olet luonut animaation, voit viedä koodi aivan kuten muiden CSS-generaattorien kanssa. Lukuun ottamatta tätä koodia on paljon helpompi työskennellä ja jopa mukana tulee sisäänrakennettu minikaattorityökalu.

Käyttöliittymä voi aluksi tuntea sekaannusta, mutta vain siksi, kuinka monta vaihtoehtoa sinulla on!

Voit luoda mukautettuja animaatioita seuraavat kolme vaihetta ja käyttöliittymää ylhäältä alas:

1. Valitse liiketyyli (swing, slide, flip-scale) yläreunan ympyröistä
2. Mukauta sitä eri liiketyypeillä pinnan alla
3. Muokkaa animaatiovaihtoehtoja kelluva vasemmanpuoleinen valintapalkki

Tämän prosessin avulla voit muuttaa animaation kokonaiskestoa, helpottavaa tyyliä, viivettä, melko paljon kaikkea. Ja kaikki toimii puhtaalla CSS3: lla, mikä tekee siitä vielä vaikuttavamman.

Huomaa myös aivan ylimmässä navbarissa, että voit jopa valita erilaisia ​​animaatiotavoitteita.

oletuksena on “perustiedot” joka voi työskennellä melko paljon (hover, click tai välitön animaatio). Muita tavoitteita ovat mm sivun teksti, taustan animaatiot ja jopa mukautetut sisäänkäynnin animaatiot tuoda piilotetun sivun elementin näkyviin.

Pidän erityisesti “huomio” ylhäällä oleva linkki, jossa on joitakin viileitä ravistelu- ja värinän vaikutuksia painikkeisiin. Nämä toimivat hyvin CTA-painikkeilla tarttumalla huomiota ja kannustamaan käyttäjien vuorovaikutusta.

Kun olet tehnyt muutoksia, vain Napsauta pientä konsolin kuvaketta esikatseluruudun oikeassa yläkulmassa.

Tämä tuo uuden sivun näkyviin täysi CSS-animaatioluokka sekä avainrungot. Valinnaiset ominaisuudet mahdollistavat pienentää koodia ja sisältää automaattisen etuliitteen joka tukee vanhempia selaimia.

Olen käyttänyt tonnia mukautettuja CSS-animaatiotyökaluja ja epäilemättä Animista on siellä monipuolisin työkalu. Se on täysin ilmainen ja vähän monimutkainen aluksi, mutta kun ymmärrät käyttöliittymän, se on ylivoimaisesti paras generaattori, jota voit käyttää.

Jos haluat kokeilla sitä, käy vain kotisivulla ja napsauta “Kokeile minua”. Voit myös jakaa ajatuksesi ja kiitokset web-sovelluksen luoja @ ana108.