К настоящему времени вы уже должны быть знакомы с Animate.css в качестве основной библиотеки анимации среди веб-дизайнеров.

Но есть новый ребенок в блоке по имени вторники он берет веб-анимацию силой.

Эта новая библиотека не сильно отличается по формату и реализации. Но во вторник появилось несколько новых CSS-анимаций, которые вы не найдете больше нигде.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Animate.css — библиотека CSS3 для простого создания анимации

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

Исчезать и расширяться
Исчезать и сокращаться
Штамп вниз и отказов
Угловой качели
Заходите слева / справа
Сквош / растяжения
шарнир

Если вы пройдете этот список на демонстрационная страница вы заметите, что все эффекты имеют одну общую черту: физика.

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

Мы не должны создавать сумасшедшие эффекты интерфейса, которые выделяются, как больной большой палец. Тонкость — это всегда название игры, потому что она создает ощущение интерактивности любого пользовательского ввода, будь то щелчок или прокрутка.

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

Просто скачайте копию от GitHub и добавьте файл .css на свою страницу. Вы можете использовать Версия CDN прямо с GitHub, если вы не хотите загружать что-либо локально.

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

Это вторник.

Посмотрите на полная документация чтобы увидеть список всех входных / выходных классов анимации.

Если вы работаете с JavaScript, вы также можете динамически добавлять эти классы по событиям click / hover. Таким образом, вы можете добавлять класс animate только тогда, когда пользователь нажимает кнопку, которая при нажатии будет анимироваться.

Со вторником вы так много можете сделать, и это действительно новый Animate.css для прагматичной анимации пользовательского интерфейса.

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

Читайте также: Как использовать CSS3 переходы и анимацию для выделения изменений в пользовательском интерфейсе