Анимация смены изображения css

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

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

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

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

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

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

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

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

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

ul class="rotation"> li class="rotation__item">li> li class="rotation__item">li> li class="rotation__item">li> li class="rotation__item">li> ul>

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

$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 class="rotation"> dt class="rotation__item--static item--1">dt> dd class="rotation__item item--2">dd> dd class="rotation__item item--3">dd> dd class="rotation__item item--4">dd> dd class="rotation__item item--5">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-маски, получается интересное:

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

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

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник

Красивая анимация картинок на чистом CSS

Многие из Вас, не зная возможностей CSS3, используют JQuery для действий над изображениями.
Сегодня с познакомлю Вас с возможностями CSS3.

Простейший пример. Грубая смена изображений.

Для смены мы будем использовать фоновое изображение.

Плавная смена изображений

Рассмотрим более интересный вариант, плавную смену изображений, за счет абсолютного позиционирования элементов (position:absolute).

 div.example2 < width: 220px; height: 220px; margin: 0 auto; >div.example2 img < position:absolute; /*За счет transition, добиваемся плавности эффекта*/ -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; >.example2 img.smile1 < opacity:0; filter:alpha(opacity=0); >.example2:hover img.smile1 < opacity:1; filter:alpha(opacity=100); >.example2:hover img.smile2, .example2 img.smile2:hover 
  
 

Меняя время «1s», в свойстве transition, можно управлять скоростью смены изображений.

transition: all 1s ease-in-out;

Свойство Transform

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

 .example2 img.smile1 < -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); >.example2:hover img.smile1 < -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); >.example2:hover img.smile2

Ротация изображений

А теперь поиграем с ротацией изображения. Изменим css-код из 2 примера на:

 .example2 img.smile1 < -moz-transform:scale(1,0); -webkit-transform:scale(1,0); -o-transform:scale(1,0); -ms-transform:scale(1,0); >.example2:hover img.smile1 < -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); >.example2:hover img.smile2

Слайдер изображений

Попробуем сделать простейший слайдер. Он будет основан на смене свойства margin

 div.example5 < width: 220px; height: 220px; margin: 0 auto; /*Убираем полосу прокрутки*/ overflow:hidden; >div.example5 img < position: absolute; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; >.example5 img.smile1 < opacity:0; filter:alpha(opacity=0); >.example5:hover img.smile1 < opacity:1; filter:alpha(opacity=100); >.example5:hover img.smile2, .example5 img.smile2:hover < opacity:0; filter:alpha(opacity=0); >.example5 img.smile1, .example5:hover img.smile1 < margin-left: 0px; >.example5:hover img.smile2 < margin-left: 220px; >.example5 img.smile1

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

Источник

Смена изображений по таймеру с использованием CSS анимации без Javascript

Продолжаем изучать CSS и сегодня попробуем реализовать очень интересную вещь — будем по таймеру менять 2 картинки. Сделать такое на CSS до недавнего времени было просто невозможно. Итак, поехали.

Наш пример по верстке и коду CSS будет мало чем отличаться от статьи о изменении прозрачности при наведении. Верстка остается прежняя.

И CSS стили мы не трогаем. Единственное — удаляем блок с hover. В итоге в CSS должны быть описаны следующие стили

#img_container < position:relative; height:281px; width:450px; margin:0 auto; >#img_container img

А вот теперь самое время заняться наше анимацией. Я не буду подробно расписывать как все это работает, если интересно — пишите в комментариях. Просто приведу конечный CSS код

#img_container < position:relative; height:281px; width:450px; margin:0 auto; >#img_container img < position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; >@-webkit-keyframes cf3FadeInOut < 0% < opacity:1; >45% < opacity:1; >55% < opacity:0; >100% < opacity:0; >> @-moz-keyframes cf3FadeInOut < 0% < opacity:1; >45% < opacity:1; >55% < opacity:0; >100% < opacity:0; >> @-o-keyframes cf3FadeInOut < 0% < opacity:1; >45% < opacity:1; >55% < opacity:0; >100% < opacity:0; >> @keyframes cf3FadeInOut < 0% < opacity:1; >45% < opacity:1; >55% < opacity:0; >100% < opacity:0; >> #img_container img.top < -webkit-animation-name: cf3FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 5s; -webkit-animation-direction: alternate; -moz-animation-name: cf3FadeInOut; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 5s; -moz-animation-direction: alternate; -o-animation-name: cf3FadeInOut; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; -o-animation-duration: 5s; -o-animation-direction: alternate; animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate; >

В итоге мы получим 2 картинки, которые меняются в цикле с эффектом fade каждые 5 секунд. Как изменить этот код по себя думаю понятно. Ну а посмотреть его в работе можно, нажав кнопку ДЕМО.

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

Запись опубликована в рубрике CSS и все, что связано со стилями. Добавьте в закладки постоянную ссылку.

Источник

Анимация смены изображения css

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник