Как создать анимацию для миниатюр сайта на CSS

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

В данной демонстрации мы использовали десять различных эффектов, все они достаточно просты, но при этом смотрятся эффектно. И так, давайте рассмотрим.

Шаг 1. CSS

Дадим пример для эффекта “scale и rotate”. В этом случае, активный класс будет “scaleRotateOut”. tt-empty используется для того, чтобы определить был ли элемент пуст до данного момента. В этом случае, не убираем ссылку:

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

Если ссылка была добавлена в элемент, то просто плавно отобразим его:

Последним шагом мы будем осуществлять анимацию:

Следует отметить, что не все последние браузеры поддерживают данные эффекты, по этому данные эффекты относятся к концептам.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.