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

Красивые иллюстрации, используемые в демо-версии, нарисованы талантливым Isaac Montemayor.

Примечание:  мы создали фиктивный скрипт для навигации по фотографиям.

В демо-версии мы используем неупорядоченный список с изображениями завёрнутых в якорь (тег <a>). В зависимости от класса списка, мы будем применять определённый эффект. Следующий набор изображений будут вставлен в элементы списка, что означает, что мы будем иметь два якоря в одном элементе списка.

Пример для эффекта “scale and rotate”. Активный класс вызовет анимации и первый якорь исчезнет с "scaleRotateOut" ключевых кадров. tt-empty используется для указания, если пункт ранее был пустой. Так что в этом случае мы не хотим, чтобы этот якорь  исчез:

/* Scale and rotate */
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child {
    animation: scaleRotateOut 0.6s forwards;
}

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

.tt-effect-scalerotate.tt-effect-active li a:nth-child(2),
.tt-effect-scalerotate.tt-effect-active li.tt-empty a {
    opacity: 0;
    animation: scaleRotateIn 0.6s forwards;
}

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

.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child {
    animation: fadeOut 0.6s forwards;
}

Для правильного эффекта необходимо перекрыть нижние элементы строк списка верхними строками, так что мы установим z-index:

.tt-effect-scalerotate li:nth-child(-n+3) { z-index: 2; } /* order for correct overlapping */
.tt-effect-scalerotate li:nth-last-child(-n+3) { z-index: 1; }

И, наконец, мы определяем анимации:

@keyframes scaleRotateOut { 
    100% { opacity: 0; transform: scale(0); }
}
 
@keyframes scaleRotateIn { 
    0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); }
    100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); }
}
 
@keyframes fadeOut { 
    from { opacity: 1; }
    to { opacity: 0; }
}

Анимация будет работать только в браузерах, которые поддерживают их. В IE10 проблемы, связанные из-за использования процентов на transforms.

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.