Stylie - Een gratis CSS Web Animation Builder
Als je worstelt met CSS3-syntaxis en een wilt eenvoudige manier om animaties te maken Stylie is een geweldige tool om te bewaren.
Dit is een van de vele gratis codegeneratoren met een focus op pure CSS geanimeerde effecten. Stylie is volledig gratis en open source, wordt gehost op GitHub en wordt aangedreven door een keyframe-bibliotheek genaamd Rekapi.
De bibliotheek van Rekapi gebruikt JavaScript, dus het is een alternatief voor pure CSS. En gelukkig ondersteunt de Stylie-web-app beide methoden, dus dat kan exporteer code in pure CSS of JavaScript.
Standaard laadt de eerste pagina een continue animatiedemo met een lineaire animatie. Je kunt hiermee spelen door de standaard instellingen in de Tabblad Beweging of door de Het tabblad Hoofdframes.
In de hoofdframelijst kunt u dit doen nieuwe keyframes toevoegen, bewerk hun totale duur, en verander de animatiestijlen, inclusief bewegingen gebaseerd op de X / Y-as.
Eerst zal dit eruit zien zeer verwarrend, vooral als je nog nooit keyframe-animatie hebt gedaan. Hoe meer u met deze toepassing speelt, hoe logischer het wordt.
Standaard heb je een ton verschillende versnellingsopties knoeien met en ze zijn allemaal super eenvoudig aan te passen.
De Bewegingsgrafiek is een stuk lastiger om te leren, maar het geeft je veel meer controle over je animatie-versoepeling. Stylie laat je zelfs bewaar aangepaste bewegingseffecten en hergebruik deze op het tabblad Keyframes voor andere animaties.
Als ik over één ding zou kunnen klagen, dan zijn het de web-app's gebrek aan responsief ontwerp.
Ik kon de hele app niet op mijn 13 "MacBook Pro-scherm laten passen, zelfs als de browser volledig gemaximaliseerd was. Dit kan een probleem zijn omdat de pagina geen verticale schuifbalk heeft en veel van de opties (zoals geëxporteerde code) gevonden worden lager in het instellingenpaneel.
Maar afgezien van deze kleine ergernis, werkte het prima op mijn grotere monitor. En de exportkwaliteit is als niets anders dat je op internet vindt.
Neem een kijkje in de Stylie-app om te zien hoe het werkt en probeer een beetje van de opties lastig te vallen. Nadat je je animatie hebt gemaakt, kun je dat exporteer de CSS of de JavaScript en gebruik dat voor elk project dat je leuk vindt.
Als u problemen ondervindt bij het leren van de interface, kunt u deze korte zelfstudie van ongeveer 9 minuten bekijken en alle belangrijke functies bespreken.
