Stylie - Свободен CSS уеб анимация Builder

Ако се борите със синтаксиса на CSS3 и искате a лесен начин за създаване на анимации Stylie е чудесен инструмент за спестяване.

Това е една от многото свободни генератори на кодове с акцент върху чистите анимирани ефекти на CSS. Stylie е напълно безплатна и с отворени източници, хоствана в GitHub и захранвана от библиотека с ключови рамки, наречена Rekapi.

Библиотеката на Рекапи използва JavaScript, това е алтернатива на чистия CSS. И за щастие уеб приложението Stylie поддържа и двата метода, така че можете код за износ в чист CSS или JavaScript.

По подразбиране първата страница зарежда непрекъсната демонстрация на анимация с линейна анимация. Можете да играете с това, като редактирате настройките по подразбиране в Раздел за движение или чрез редактиране на Раздел Ключови кадри.

В списъка с ключови кадри можете добавете нови ключови кадри, редактирайте общата им продължителност, и промяна на стила на анимация, включително движенията, базирани на оста X / Y.

Първо, това ще изглежда изключително объркващо, особено ако никога преди не сте правили анимация с ключови кадри. Въпреки това, колкото повече играете с това приложение, толкова повече има смисъл.

По подразбиране ще имате тон различни варианти за облекчаване да се забъркваш и всички те са супер лесни за персонализиране.

Най- Графика на движението е много по-труден за изучаване, но ви дава много по-голям контрол над олекотяването на анимацията. Stylie дори ви позволява запазване на персонализирани ефекти за движение и ги използвайте повторно в раздела Ключови кадри за други анимации.

Ако можех да се оплача за едно нещо, това е уеб приложението липса на отзивчив дизайн.

Не можех да накарам цялото приложение да се побере на екрана ми с 13-инчов MacBook Pro, дори когато браузърът ми беше максимално увеличен. Това може да е проблем, тъй като страницата няма вертикален плъзгач и много от опциите (като експортирания код) са намерени в прозореца с настройки.

Но освен този незначителен раздразнение, той работи добре на моя по-голям монитор. И, качество на износа е като нищо друго, което ще намерите в мрежата.

Обърнете внимание в приложението на Stylie, за да видите как работи и опитайте да изпробвате някои от опциите. След като направите анимацията си, можете експортирайте CSS или JavaScript и го използвайте за всеки проект, който желаете.

Ако имате проблеми с изучаването на интерфейса, можете да гледате този кратък урок с дължина от около 9 минути и да покривате всички основни функции.