Инструменты для создания CSS-анимации
👉
Spinkit — Набор из 11 CSS-эффектов, который можно применять для загрузочных страниц. В них используются translate и opacity, поэтому вся анимация будет обрабатываться в GPU, а не в CPU. Написан на SCSS.
👉
Stylie — Позволяет создавать сложные анимации без кода. Также позволяет добавлять, удалять и редактировать ключевые кадры в панели Keyframes. Сервис генерирует CSS-код, отображающий анимации во всех современных браузерах.
👉
Hover CSS — Коллекция CSS3-эффектов, которые активируются при наведении курсора на элементы дизайна (ссылки, кнопки, логотипы, изображения, SVG-компоненты и т.д).
👉
CSShake — Простой в использовании инструмент для создания эффекта встряски у элементов. Эффект встряски – один из самых простых способов указать на интерактривность элемента.
👉
Keyframer — Удобный инструмент, который довольно прост в использовании. Чтобы добавить ключевой кадр, вам нужно только кликнуть по шкале времени, а затем нажать на круглую кнопку, чтобы применить CSS-стили для анимации. Или кнопку с крестиком, чтобы удалить текущий кадр.
👉
Magic CSS3 Animations — Пакет CSS3-анимаций со спецэффектами, которые вы можете свободно использовать для любых веб-проектов. Достаточно включить стиль CSS magic.css или минимизированную версию magic.min.css. Примеры анимации можно посмотреть на сайте.
👉
CSS3 Animation Cheat Sheet — Набор предустановленной plug-and-play анимации. Для использования нужно применить подготовленные классы к элементам, которые вы хотите анимировать. Инструмент использует правило keyframes и работает во всех последних версиях браузеров (в том числе в IE 10).
👉
Animate.css — Библиотека для создания анимации при помощи CSS3. Поддерживает более 50 различных анимационных эффектов, которые работают в браузерах, поддерживаемых CSS3.
👉
AniJS — Библиотека для создания CSS-анимации, позволяющая анимировать элементы при помощи HTML-атрибутов. В ее состав входит множество интересных анимаций.
#полезно #подборки_инструментов
👉
@frontend_mind