Creëer eenvoudig Cool CSS-animaties met Animista

Er zijn ton CSS-animatie web-apps online. Maar zeer weinigen vergelijken met het detailniveau en gebruiksgemak waarmee u te maken krijgt Animista.

Met deze gratis web-app kun je genereer aangepaste CSS-animaties met één klik op de knop. U selecteert tussen vooraf ontworpen bewegingen, zoals dia's, transformaties, schommels en zelfs schaduwdruppelanimaties.

Nadat u uw animatie hebt gemaakt, kunt u exporteer de code net als met andere CSS-generators. Behalve, deze code is veel gemakkelijker om mee te werken en zelfs wordt geleverd met een ingebouwde minifier-tool.

De interface kan in het begin verwarrend lijken, maar dat is alleen vanwege het aantal opties dat je hebt!

Je maakt aangepaste animaties volgende drie hoofdstappen en gebruik van de interface van boven naar beneden:

1. Kies een bewegingsstijl (schommel, schuif, flip-schaal) van de cirkels aan de bovenkant
2. Pas het aan met verschillende bewegingstypen onder
3. Bewerk je animatie-opties in de zwevende optiebalk aan de linkerkant

Door dit proces kun je de totale duur van de animatie, de versnellingsstijl, de vertraging, vrijwel alles veranderen. En dat alles werkt via pure CSS3, waardoor het nog indrukwekkender wordt.

Let ook op de bovenste navigatiebalk waar je zelfs uit kunt kiezen verschillende soorten animatie-doelstijlen.

De standaard is “basis-” die vrijwel alles aankan (zweven, klikken of onmiddellijke animatie). Andere doelen omvatten paginatekst, achtergrondanimaties en zelfs aangepaste ingangsanimaties om een ​​verborgen pagina-element in beeld te brengen.

Ik vind vooral het leuk “aandacht” link bovenaan met coole shake en jitter-effecten voor knopstijlen. Deze werken geweldig op CTA-knoppen om de aandacht te trekken en gebruikersinteracties aan te moedigen.

Als je klaar bent met het maken van aanpassingen, doe je gewoon klik op het pictogram van de kleine beugel in de rechterbovenhoek van het voorbeeldvenster.

Dit brengt een nieuwe pagina in beeld met uw volledige CSS-animatieklasse, samen met de hoofdframes. Optionele functies kunt u doen verkleint de code en omvatten de auto-prefixer welke oudere webbrowsers ondersteunt.

Ik heb tonnen aangepaste CSS-animatietools gebruikt en zonder twijfel is Animista de meest veelzijdige tool die er is. Het is in eerste instantie helemaal gratis en een beetje ingewikkeld, maar als je de interface eenmaal begrijpt, is dit verreweg de beste generator die je kunt gebruiken.

Om het eens te proberen, gaat u naar de startpagina en klikt u op “Probeer mij”. Je kunt ook je gedachten en complimenten delen met de maker van de web-app @ ana108.