10 CSS3 анимационных инструментов, которые вы должны добавить в закладки
Поскольку люди, как правило, легче воспринимают движущиеся объекты, грамотно используемые анимации могут улучшить взаимодействие с пользователем сайта за счет Привлекая внимание к важным элементам, пользователи должны быстро заметить.
CSS3 представил новый синтаксис анимации, который может помочь вам достичь многих интересных вещей в ваших проектах. Создание классной анимации иногда может быть сложным и занимать много времени, но именно тогда библиотеки анимации и генераторы могут быть превосходно использованы.
Ознакомьтесь с некоторыми анимациями, которые стали возможны с помощью CSS:
- 38 вдохновляющих демонстраций анимации CSS3
- 15 красивых текстовых эффектов, созданных с помощью CSS
- 30 крутых анимаций CSS, которые вы должны увидеть
- Как создать эффект отскока с помощью анимации CSS3
В этом посте мы рассмотрим 10 великолепных инструментов, которые могут упростить и ускорить создание ваших собственных анимаций..
1. CSS3Gen CSS3 генератор анимации
CSS3Gen предоставляет вам простой в использовании генератор анимации, который позволяет быстро создавать основные анимации. Хотя с помощью этого инструмента вы не будете создавать сложные рисунки, это отличный выбор, если вы хотите создать стандартную анимацию без особых хлопот.
Вы не нужно пачкать руки кодом, так как вы можете установить свойства формы, предварительно просмотреть результат, а затем просто скопируйте и вставьте код в свой собственный файл CSS.
2. CSS Animate
если ты нужны более сложные анимации, вы можете найти CSS Animate полезно. Он имеет более зрелый пользовательский интерфейс, вы можете установить немного больше свойств, а также отслеживать, останавливать и перезапускать анимацию с помощью интуитивно понятной временной шкалы..
Есть также примеры анимации, такие как “подпрыгивать”, “Встряска”, а также “свинг”, что вы можете загрузить в генератор и изменить код в соответствии с вашими потребностями.
3. Совместно работающий генератор анимации CSS
Covelopingгенератор анимации, вероятно, лучший выбор если вы новичок в CSS3 анимации, и хочу быстро понять, как они работают. Этот простой, но мощный инструмент позволяет вам тестировать различные типы анимаций, которые предлагает CSS3, и легко проверять, в чем разница между ними..
Вам нужно только установить 4 параметра: тип анимации, функцию анимации, продолжительность в секундах и, если анимация бесконечна. Когда вы будете готовы, вам нужно только получить и захватить сгенерированный код HTML и CSS.
4. Волшебные анимации
Волшебные анимации это классная библиотека CSS, которая позволяет легко размещать анимацию со спецэффектами на Вашем сайте. Например, вы можете заставить элементы исчезать и открываться, открываться влево или вправо, затем возвращаться, вращаться вниз, вверх, влево или вправо и многие другие.
Все, что вам нужно сделать, это загрузить код, включить CSS-файл на свою HTML-страницу и добавить соответствующий класс с помощью jQuery следующим образом:
$ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn');); Вы также можете изменить настройки таймера и сделать анимацию бесконечной с помощью jQuery (подробнее см. Файл readme).
5. Animate.css
Animate.css предоставляет вам набор классная, кроссбраузерная CSS3 анимация. Анимации разделены на группы, такие как «Искатели внимания», «Прыгающие входы», «Прыгающие выходы», «Затухающие входы» и многие другие, поэтому вы действительно не можете жаловаться на отсутствие выбора..
Вы можете скачать код с Github, тогда вам нужно только добавить файл CSS на свою страницу HTML и соответствующие классы CSS для элементов HTML, которые вы хотите анимировать.
6. Bounce.js
Bounce.js это удобная библиотека JavaScript, которая позволяет вам создавать сложные анимации. Bounce.js имеет развитый пользовательский интерфейс, который позволяет либо вручную добавлять в анимацию различные компоненты, такие как замедление, длительность, задержка и количество отскоков, либо выбирать готовый пресет, а затем воспроизводить анимацию, и настроить свойства, если это необходимо.
7. AniJS
AniJS JavaScript-библиотека supercool, которая позволяет добавлять CSS3-анимацию в ваши проекты и создавать сложные компоненты пользовательского интерфейса такие как анимированные вкладки, аккордеоны, модалы, скользящие меню, уведомления о мобильных приложениях, показы прокрутки и многое другое.
Он работает со всеми современными браузерами, включая iOS и Android, не требует сторонних библиотек и имеет впечатляющую витрину под названием AniCollection, где вы можете легко экспериментировать с различными эффектами, предоставляемыми библиотекой..
8. Одноэлементные CSS Spinners
Вы когда-нибудь хотели улучшить свои проекты с анимированные спиннеры загрузки? Если ответ «да», эта симпатичная библиотека CSS-блесна может стать отличным выбором для вас. Код CSS для спиннеров написан на LESS. Там нет никаких настроек, код готов, вам нужно только вставить его в ваши собственные файлы HTML и CSS.
9. Одометр
одометр это блестящий инструмент для разместить крутые анимированные метры на свой сайт. Это библиотека CSS и JavaScript, часть CSS написана на Sass, и вы можете выбирать из разных тем, таких как “цифровой”, “Железнодорожная станция”, а также “Автомобиль”.
Чтобы использовать одометр, вы должны добавить файл JavaScript и файл выбранной темы на страницу HTML, а затем класс = «одометр» Выбор элемента, который вы хотите превратить в анимированный метр. Идеальный выбор для визуального представления данных или создания “Скоро будет” страница более привлекательной.
10. Snabbt.js
Snabbt.js это минималистичная анимационная библиотека, которая помогает вам легко перемещать вещи. Если вам нужно немного вдохновения, взгляните на демонстрации, чтобы увидеть, чего вы можете достичь с помощью этого интеллектуального инструмента анимации. Анимированная периодическая таблица на скриншоте ниже - лишь одна из многих возможностей, которые Snabbt.js позволяет легко реализовать..
Вам нужно написать немного JavaScript, если вы хотите использовать эту библиотеку, но в результате это довольно впечатляет, так что, вероятно, стоит потратить.
