Стилі - Безкоштовний CSS Web Анімація Builder

Якщо ви боретеся з синтаксисом CSS3 і хочете a простий спосіб створення анімації Стилі це відмінний інструмент для збереження.

Це один з багатьох вільних генератори коду з акцентом на чисті анімовані ефекти CSS. Stylie абсолютно безкоштовна і відкрита, розміщена на GitHub і працює на бібліотеці ключових кадрів під назвою Rekapi.

Бібліотека Рекапі використовує JavaScript, так що це альтернатива чистому CSS. І, на щастя, веб-додаток Stylie підтримує обидва способи експортувати код чистим CSS або JavaScript.

За замовчуванням перша сторінка завантажує постійну демонстрацію анімації з лінійною анімацією. Ви можете грати з цим, редагуючи налаштування за замовчуванням в Вкладка Рух або шляхом редагування Вкладка ключових кадрів.

У списку ключових кадрів ви можете додати нові ключові кадри, редагувати їх загальну тривалість, і змінити стилі анімації, включаючи рухи на осі X / Y.

По-перше, це буде виглядати надзвичайно заплутаним, особливо, якщо ви ніколи раніше не виконували анімацію ключових кадрів. Однак, чим більше ви граєте з цією програмою, тим більше вона має сенс.

За замовчуванням, ви будете мати тонну різні варіанти ослаблення зіткнутися, і всі вони дуже легко налаштувати.

The Графік руху набагато складніше вчитися, але це дає вам набагато більше контролю над полегшенням анімації. Stylie навіть дозволяє вам зберегти власні ефекти руху і використовувати їх повторно на вкладці Ключові кадри для інших анімацій.

Якщо б я міг скаржитися на одне, це веб-додатки відсутність чуйного дизайну.

Я не міг залучити всю програму до екрану 13-дюймового MacBook Pro, навіть якщо браузер повністю розгорнуто. Це може бути проблемою, оскільки сторінка не має вертикальної смуги прокрутки, і багато опцій (наприклад, експортованого коду) знайдено нижче в області налаштувань.

Але крім цього незначного роздратування, я отримав його працюючий чудово на мойому більшому моніторі. І, якість експорту це нічого іншого, що ви знайдете в Інтернеті.

Загляньте в додаток Stylie, щоб побачити, як він працює, і спробуйте виконати деякі з варіантів. Як тільки ви зробите свою анімацію, ви можете експортувати CSS або JavaScript і використовуйте це для будь-якого проекту, який вам подобається.

Якщо у вас виникли проблеми з вивченням інтерфейсу, ви також можете подивитися цей короткий підручник, який охоплює довжину близько 9 хвилин і охоплює всі основні функції.