Stylie – бесплатный конструктор веб-анимации CSS

Если вы боретесь с синтаксисом CSS3 и хотите простой способ создания анимации Stylie отличный инструмент для сохранения.

Это один из многих бесплатных генераторов кода с акцентом на чисто анимированные CSS-эффекты. Stylie абсолютно бесплатный и с открытым исходным кодом, размещен на GitHub и питание от библиотеки ключевых кадров под названием Rekapi,

Библиотека Rekapi использует JavaScript, поэтому она является альтернативой чистому CSS. И, к счастью, веб-приложение Stylie поддерживает оба метода, поэтому вы можете экспортировать код в чистом CSS или JavaScript.

По умолчанию первая страница загружает демонстрацию непрерывной анимации с линейной анимацией. Вы можете поиграть с этим, отредактировав настройки по умолчанию на вкладке «Движение» или отредактировав вкладку «Ключевые кадры».

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

Читайте также: 10 CSS3 инструментов анимации, которые вы должны добавить в закладки

Во-первых, это будет выглядеть очень запутанныйособенно если вы никогда раньше не делали анимацию по ключевым кадрам. Однако чем больше вы играете с этим приложением, тем больше оно имеет смысла.

По умолчанию у вас будет куча различных вариантов смягчения, и их очень легко настроить.

График движения намного сложнее в освоении, но он дает вам гораздо больший контроль над замедлением анимации. Stylie даже позволяет сохранять пользовательские эффекты движения и повторно использовать их на вкладке «Ключевые кадры» для других анимаций.
Если бы я мог пожаловаться на одну вещь, это отсутствие адаптивного дизайна веб-приложения.

Мне не удалось разместить все приложение на моем 13-дюймовом экране MacBook Pro даже при полностью развернутом браузере. Это может быть проблемой, поскольку страница не имеет вертикальной полосы прокрутки, а многие параметры (например, экспортированный код) находятся ниже на панели настроек.

Но, кроме этого небольшого раздражения, у меня все получилось на моем большом мониторе. И качество экспорта не похоже ни на что другое, что вы найдете в Интернете.

Взгляните на Приложение Stylie чтобы увидеть, как это работает, и попробуйте поиграть с некоторыми из опций. Создав анимацию, вы можете экспортировать CSS или JavaScript и использовать их для любого понравившегося вам проекта.

Если у вас возникли проблемы с изучением интерфейса, вы также можете посмотреть этот краткий учебник охватывающий около 9 минут и охватывающий все основные функции.

Читайте также: Как создавать анимацию и переходы с помощью Motion UI