Эффекты для изображений css: 10 невероятных и крутых эффектов при наведении на изображение бесплатно — Независимое театральное объединение "Зрительские симпатии"

Содержание

Применение эффектов к изображениям с помощью CSS-свойства «mask-image»

CSS-маски позволяют использовать изображение в качестве слоя маски.
Например, можно использовать изображение, SVG или градиент в качестве маски
и создать интересный эффект без графического редактора.

Sep 14, 2020

Если обрезать элемент с помощью свойства clip-path, то обрезанная область становится невидимой. Чтобы сделать часть изображения непрозрачной или применить к ней другой эффект, нужно использовать маску. В этой статье рассказывается, как использовать свойство mask-image в CSS и указать изображение в качестве слоя маски. Есть три варианта: в качестве маски можно использовать файл изображения, SVG или градиент.

Совместимость с браузерами #

Большинство браузеров поддерживают стандартное свойство CSS-маски лишь частично. Для наилучшей совместимости в дополнение к стандартному свойству нужно использовать префикс -webkit-. Подробнее о поддержке в браузерах см. страницу Can I use о CSS-масках.

Поддержка в браузере с использованием префиксного свойства — это, конечно, хорошо, но при использовании маски для показа текста поверх изображения нужно будет позаботиться о случае, если маскирование окажется недоступно. Прежде чем добавлять версию изображения с маской, стоить сделать запросы функций, которые укажут на поддержку mask-image или -webkit-mask-image, и дать читаемую альтернативу на случай, если маски не поддерживаются.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* Код, требующий mask-image. */
}

Маска с использованием изображения #

Свойство mask-image работает аналогично background-image: для передачи изображения нужно использовать url(). На изображении для маски должна быть прозрачная или полупрозрачная область.

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

В этом примере я также использую свойство mask-size со значением cover, которое работает так же, как background-size. Вы можете использовать ключевые слова cover и contain или указать размер фона в единицах длины или в виде процентного значения.

Кроме того, маску, как и фоновое изображение, можно повторять: так из маленькой картинки можно сделать повторяющийся узор.

Маска с использованием SVG #

В качестве маски можно использовать SVG. Здесь есть несколько вариантов. Во-первых, можно вставить элемент <mask> в SVG и указать его идентификатор в свойстве mask-image.

<svg viewBox="0 0 400 300">
<defs>
<mask>
<rect fill="#000000" x="0" y="0"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg><div>
<img src="balloons. jpg" alt="Воздушные шары">
</div>

.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}

Здесь преимущество в том, что маску можно применить к любому элементу HTML, а не только к изображению. К сожалению, такой подход поддерживается только в Firefox.

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

Маска с использованием градиента #

Использование CSS-градиента в качестве маски — это элегантный способ получить замаскированную область, не создавая специальное изображение или SVG.

Используя простой линейный градиент в качестве маски, можно сделать так, чтобы нижняя часть изображения была не слишком тёмной (например, если на ней находится подпись).

Использовать можно любой из поддерживаемых типов градиента — есть где развернуться! В следующем примере с помощью радиального градиента формируется круглая маска для выделения подписи.

Использование нескольких масок #

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

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

background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Чтобы превратить этот (и любой другой узор для фона) в маску, нужно заменить свойства background-* соответствующими свойствами mask, включая те, что с префиксом -webkit.

-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Используя градиентные узоры на изображениях, можно получить классные эффекты — попробуйте переделать этот код и посмотрите, что получится.

CSS-маски позволяют сделать изображения и другие элементы HTML более интересными, не используя графический редактор.

Автор фото — Хулио Риональдо, платформа Unsplash.

Последнее обновление: Sep 14, 2020— Улучшить статью

Режим наложения CSS: примеры создания интересных эффектов

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

Режим наложения CSS является одним из таких открытий. Он позволяет элементам отображать цвета как переднего, так и фонового слоев. Это работает во многом так же, как в режимы наложения Photoshop — создавая интересные эффекты.

Хотя поддержка браузерами на момент написания этой статьи не составляла 100% (все из-за, или почти все из-за, Microsoft), дизайнеры уже изучают, чего можно достичь с помощью режимов наложения. Посмотрите на некоторые из наиболее интересных примеров, которые мы нашли.

Разница, которую может дать наложение

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Темы фонов

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

Фильтр и смесь

Потенциальные возможности манипулирования изображениями с помощью CSS удивительны. Этот инструмент предлагает визуальное доказательство, позволяя вам настроить базовые / средние / яркие эффекты и используемые цвета. Конечный результат может сильно отличаться от оригинала.

Меньше кода, больше результатов

Эта тщательно смешанная фотография дает пример того, чего можно достичь с помощью только CSS. Что делает ее еще более впечатляющей, так это то, что таблица стилей составляет всего пять строк.

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

Прогрессивная навигация

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Двойное впечатление

Процесс многократной экспозиции фотографии объединяет два изображения в одно. Эта концепция используется здесь с отличным эффектом: фоновая фотография сочетается с анимированным GIF-изображением для создания чего-то довольно психоделического. Это также усиливает желание играть в некоторые классические видеоигры.

Радикальный текст

Комбинируйте режимы наложения с текстом SVG, и вы сможете создавать великолепные эффекты. В этом примере создаются два слоя текста. Один имеет цвет заливки, другой — контур. Затем они располагаются со смещением относительно друг друга, что создает привлекательный вид. Этот даже адаптивно.

Бесшовная радуга

Мы закроем нашу коллекцию примером того, как немного креатива может иметь большое значение. Эта потрясающая радуга цветов может выглядеть очень сложной. Однако на самом деле она состоит из трех довольно простых CSS-градиентов в сочетании с режимом наложения. Иногда простое работает лучше.

Заключение

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

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

Потратьте некоторое время, чтобы поэкспериментировать с режимами наложения CSS и посмотреть, как они могут улучшить ваш следующий проект.

Автор: Eric Karkovack

Источник: //speckyboy.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Фильтрация изображений с помощью технологий CSS3!

При создании галереи изображений, возникает соответственно потребность в их сортировке, для удобства пользователя. И сегодня мы будет создавать эффект – фильтрация изображений на CSS3. Используя псевдо-класс :checked, мы можем создать переключение состояния элементов с помощью чекбокса или радио кнопки.

В этом уроке мы будем изучать эти css3 эффекты

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

Идея принадлежит автору Роману Комарову и его эксперимент “Фильтр элементов без JS”, в котором он использует чекбоксы и радио кнопки для фильтрации цветных фигур. Итак, давайте приступим!

HTML структура

Наша цель заключается в том, чтобы создать четыре кнопки, которые при нажатии будут активировать сортировку по заданным параметрам. Таким образом, для них мы будем использовать радио-кнопки, все они имеют одинаковые имена, так как принадлежат к одной группе (здесь только один можем иметь состояние checked).

По умолчанию, мы хотим, чтобы “все” радио-кнопки были в состоянии активности и были показаны все картинки.

Мы добавим несколько этикеток label для переключателей. Нажатие на label активирует радио кнопку (на которую нажал пользователь) с соответствующим ID:

<label for=»select-type-1″>Web Design</label>

<label for=»select-type-2″>Illustration</label>

<label for=»select-type-3″>Icon Design</label>

<ul>

<li>

<span>Chameleon</span>

</a>

</li>

<li>

<!— … —>

</li>

<li>

<!— … —>

</li>

<!— … —>

</ul>

</section>

Маркированный список ul будет содержать все элементы портфолио изображений – ссылку, саму картинку и тег

span. Каждый элемент списка будет иметь специальный класс, который позволит определить куда фильтровать его, когда мы щелкаем на одну из кнопок.

CSS стили

Мы будем создавать три эффекта сортировки контента, но сначала давайте рассмотрим общие стили. Весь блок с контентом будет иметь определенную ширину:

.ff-container{

width: 564px;

margin: 10px auto 30px auto;

}

Этикетки label закроют радио-кнопки и мы дадим им солидный градиент и некоторые тонкости в тени:

. ff-container label{

font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif;

width: 25%;

height: 30px;

cursor: pointer;

color: #777;

text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

line-height: 33px;

font-size: 19px;

background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

float:left;

box-shadow:

0px 0px 0px 1px #aaa,

1px 0px 0px 0px rgba(255,255,255,0.9) inset,

0px 1px 2px rgba(0,0,0,0.2);

}

На углах мы хотим сделать закругленные края, поэтому первая кнопка и последняя получат определенный радиус скругления:

.ff-container label.ff-label-type-all{

border-radius: 3px 0px 0px 3px;

}

.ff-container label.ff-label-type-3{

border-radius: 0px 3px 3px 0px;

}

Для каждой активной кнопки, мы хотим также задать свои стили в нажатом состоянии:

. ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,

.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,

.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,

.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{

background: linear-gradient(top, #646d93 0%,#7c87ad 100%);

color: #424d71;

text-shadow: 0px 1px 1px rgba(255,255,255,0.3);

box-shadow:

0px 0px 0px 1px #40496e,

0 1px 2px rgba(0,0,0,0.1) inset;

}

Так как у нас все наши элементы находятся на одном уровне, мы используем общий брат комбинатор, который представлен как “тильда” (~), чтобы достичь соответствующего label. С этим «трюком» мы также добавим другие возможности.

Поля input могут быть скрыты, так как у нас есть метки label, которые сделают свою работу:

. ff-container input{

display: none;

}

Теперь перейдем к элементам списка.

.ff-items{

position: relative;

margin: 0px auto;

padding-top: 20px;

}

Ссылка и тег span имеют следующие стили:

.ff-items a{

display: block;

position: relative;

padding: 10px;

background: #fff;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

margin: 4px;

width: 160px;

height: 120px;

}

. ff-items a span{

display: block;

background: rgba(113,123,161, 0.9);

font-style: italic;

color: #fff;

font-weight: bold;

padding: 20px;

position: absolute;

bottom: 10px;

left: 10px;

width: 120px;

height: 0px;

overflow: hidden;

opacity: 0;

text-align: center;

text-shadow: 1px 1px 1px #303857;

transition: all 0.3s ease-in-out;

}

.ff-items a:hover span{

height: 80px;

opacity: 1;

}

.ff-items li img{

display: block;

}

При наведении на ссылку снизу появится текст (тег span). Это оживит изображения и придаст красивый эффект и юзабилити.

Все, это были основные, общие стиле. Как я уже упоминал выше, мы создадим 3 эффекта сортировки. Давайте посмотрим особенности каждого из них!

Пример 1

В первом примере все очень просто, выбранным элементам (т. е. те которые попали в сортировку), мы даем высокую прозрачность. Переход прозрачности делаем плавным:

.ff-items li{

margin: 0px;

float: left;

opacity: 0;

width: 188px;

height: 148px;

transition: opacity 0.6s ease-in-out;

}

Затем мы будем использовать общий брат комбинатор для элементов, которые выбраны и установим для них прозрачность 0:

.ff-container input.ff-selector-type-all:checked ~ .ff-items li,

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,

.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,

.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{

opacity: 1;

}

Поскольку у нас есть кнопка "ВСЕ", по умолчанию все элементы будут иметь нулевую прозрачность.

Теперь, все остальные пункты должны получить очень низкую прозрачность, раз мы выбираем другой тип, то есть сортируем по выбранным параметрам. Мы будем использовать селектор :not() для определения, что список элементов, который не имеют выбранного класса, должны иметь прозрачность 0.1:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),

.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),

.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){

opacity: 0.1;

}

Также мы не будем показывать описание при наведении для тех элементов, которые не выбраны и имеют прозрачность 0.1:

.ff-container input.ff-selector-type-1:checked ~ . ff-items li:not(.ff-item-type-1) span,

.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,

.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{

display: none;

}

И это был первый пример, первый эффект. Давайте посмотрим далее…

Пример 2

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

.ff-items li{

margin: 0px;

float: left;

width: 188px;

height: 148px;

transition: all 0.6s ease-in-out;

}

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

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,

.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,

.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{

opacity: 1;

transform: scale(1.1);

}

Здесь следует отметить, что мы не включили тип "ВСЕ", как раньше.

Не выбранные элементы мы будем уменьшать и применять высокий уровень прозрачности:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),

.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),

.ff-container input. ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){

opacity: 0.1;

transform: scale(0.5);

}

И снова скрываем описание при наведении для не выбранных картинок:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,

.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,

.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{

display:none;

}

Это был второй эффект, но у нас есть ещё один! Смотрим…

Пример 3

Обратите внимание, что этот пример создан как эксперимент и будет корректно работать только в браузерах, поддерживающих CSS анимации.

Последний пример – это всего лишь эксперимент. Мы хотим сделать что-то немного сложнее: при выборе типа сортировки, мы хотим масштабировать все элементы “внутрь”, а затем снова масштабировать только те элементы, которые были выбраны.

Другие изображения исчезают, и так как мы не можем анимировать свойство отображения (даже с некоторой комбинацией непрозрачности), мы используем маленькую хитрость: после масштабирования пунктов “внутрь”, мы также делаем анимацию ширины тех, которые должны появиться.

Так что, давайте дадим для элементов списка изначально ширину 0 и масштабировать scale до 0 (внимание: возможна некорректная работа в старых браузерах):

.ff-items li{

margin: 0px;

float: left;

height: 148px;

width: 0px;

transform: scale(0,0);

}

Когда выбрано "ВСЕ", мы имеем масштаб 1, а ширину 188px:

.ff-container input.ff-selector-type-all:checked ~ .ff-items li{

width: 188px;

transform: scale(1,1);

transition: transform 0. 3s linear;

}

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

В это время, элементы, которые не выбраны (те, что мы получаем с помощью селектора :not()) будут иметь scaleDown анимацию, которая будет масштабировать их и даст ширину 0.

Через 0,4 секунд, мы показываем выбранные элементы с эффектом анимации, за счет масштаба:

.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,

.ff-container input.ff-selector-type-2:checked ~ . ff-items .ff-item-type-2,

.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3

{

transition: transform 0.3s linear, width 0s linear 0.3s;

animation: scaleUp 0.3s linear 0.4s forwards;

}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),

.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),

.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3)

{

animation: scaleDown 0.3s linear forwards;

}

@keyframes scaleUp {

50% { width: 188px; transform: scale(0,0); }

100% { width: 188px; transform: scale(1,1); }

}

@keyframes scaleDown {

0% { width: 188px; transform: scale(1,1);}

99% { width: 188px; transform: scale(0,0);}

100% { width: 0px; transform: scale(0,0); }

}

Заключение

Итак, вот что мы имеем на выходе:

И вот оно! Я надеюсь, вам понравился этот урок и нашли для себя вдохновение!

Данный урок подготовлен для вас командой сайта vladmaxi.

net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

CSS-анимации для ротации изображений • Про CSS

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

Например, в этом демо используется две анимации: одна для маски, вторая — для смены изображений. Сейчас речь пойдет о второй (и её вариантах).

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

При использовании HTML-элементов это можно было бы сделать одной анимацией, но при использовании SVG-масок для всех элементов ротации используется одна маска, и ей нельзя задать задержку воспроизведения в зависимости от позиции элемента, к которому она применилась. Есть два решения: создавать для каждого шага по маске с нужной задержкой воспроизведения или просто скрывать элементы, которые не нужны в данный момент. Я выбрала второй вариант.

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

Итак, первый вариант анимации.

Задача: сделать алгоритм последовательной смены произвольного количества изображений. Одно изображение должно сменять другое без плавных переходов. В один момент времени показывается одна картинка.

Вот как это должно работать:

Делаем разметку галереи:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

В демо я добавила картинки фоном, но внутри элементов галереи может быть любое содержимое. Для демонстрации SVG-масок структура галереи переносится, соответственно, в SVG.

Добавляем SCSS:

$rotation-height: 270px;

.rotation {
  width: 100%;
  height: $rotation-height;

  &__item {
    position: absolute;
    width: 100%;
    height: $rotation-height;
  }
}

Теперь самое интересное: анимация. Создаем конфиг:


$max: 4;

$duration: 8s;

$step: $duration/$max;

$step-perc: percentage(1/$max);

Нужно понимать как работает последний параметр. Для всех элементов задается одна и та же анимация: картинка показывается на короткий промежуток времени, и затем скрывается. Переменная $step-perc используется в коде анимации, и определяет как долго будет отображаться каждая картинка:

@keyframes hide {
  0% {
    opacity: 1;
  }
  #{$step-perc} {
    opacity: 0;
  }
}

Например, в галерее из четырех элементов каждая картинка будет показываться 25% времени, а в остальное время будет скрыта.

Задаем анимацию элементам галереи:

.rotation__item {
  opacity: 0;
  animation: hide $duration step-end infinite;
}

Элементы исчезают и появляются одновременно, нужно добавить каждому из них задержку воспроизведения:

.rotation__item {
  opacity: 0;
  animation: hide $duration step-end infinite;

  
  &:nth-child(#{$max}n + 1){
    
  }
  &:nth-child(#{$max}n + 2){
    animation-delay: $step;
  }
  &:nth-child(#{$max}n + 3){
    animation-delay: $step*2;
  }
  &:nth-child(#{$max}n + 4){
    animation-delay: $step*3;
  }
}

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

Очевидно, что animation-delay будет удобнее рассчитывать в цикле:

.rotation__item {
  opacity: 0;
  animation: hide $duration step-end infinite;

  
  @for $item from 2 through $max {
    &:nth-child(#{$max}n + #{$item}){
      animation-delay: $step*($item — 1);
      }
    }
  }

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

Вот что получается в итоге:

Можно отредактировать заготовку, сделав простую ротацию:

А можно добавить спецэффектов с помощью анимированных SVG-масок, например:

Для этого демо структура галереи была перенесена в SVG.

Второй вариант анимации.

Задача: картинки появляются по очереди от нижних слоев к верхним, при этом одновременно видны две картинки: текущая и предыдущая под ней, это позволит используя маски сделать «перетекание» из одной картинки в другую.

Как это должно работать:

Анимация делается по тем же принципам, что и предыдущая, но имеет свои особенности.

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

<dl>
  <dt></dt> 
  <dd></dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
</dl>

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

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


$step-perc: percentage(1/$max);

$step-perc: percentage(1/$max*2);

В течение первого шага слой появляется сам, а в течение второго служит фоном для следующего слоя.

Во-третьих, самому верхнему слою потребуется своя отдельная анимация.

Почему?

Как уже говорилось выше, в этом варианте анимации каждый слой показывается по времени два шага.

Последний слой изначально тоже показывается два шага, но он самый верхний, и не может служить подложкой другим слоям (над ним ничего нет). Следовательно, его нужно показывать по времени один шаг, а затем скрыть. При этом самый нижний слой является копией верхнего, так что если по прошествии одного шага скрыть самый верхний слой, под ним покажется точно такой же нижний, и анимация аккуратно зациклится.

Делаем переменную с половинной длительностью анимации:

$half-step-perc: percentage(1/$max);

Дублируем анимацию с новой длительностью:

@keyframes hide-half-step {
  0% {
    opacity: 1;
  }
  #{$half-step-perc} {
    opacity: 0;
  }
}

Переопределяем анимацию для последнего шага:

.rotation__item {
  opacity: 0;
  animation: hide $duration step-end infinite;

  
  &:nth-of-type(#{$max}n) {
    animation-name: hide-half-step;
  }

  
  @for $item from 2 through $max {
    &:nth-of-type(#{$max}n + #{$item}) {
      animation-delay: $step*($item — 1);
    }
  }
}

Визуально результат практически не отличается от предыдущего варианта:

Но если к элементам галереи применить SVG-маски, получается интересное:

Синхронизация слоёных анимаций не самая простая задача, но результат того стоит.

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

28+ CSS эффектов изображения — csshint

Последняя коллекция бесплатных, отобранных вручную Pure Html CSS Image Effects Примеры для использования в ваших проектах. Демонстрация и загрузка zip (*.zip).

1. Обрезанное изображение и эффект масштабирования при наведении