Метка: CSS Анимация

Записи с меткой "CSS Анимация"

@-webkit-keyframes

Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.

Синтаксис

@-webkit-keyframes <имя анимации> {
    <селектор кадра 1> {
        <свойство 1>:<значение 1>;
        <свойство 2>:<значение 1>;
    }
    <селектор кадра 2> {
        <свойство 1>:<значение 2>;
        <свойство 2>:<значение 2>;
    }
    .....................
    <селектор кадра n> {
        <свойство 1>:<значение n>;
        <свойство 2>:<значение n>;
    }   
}

<имя анимации> — задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства -webkit-animation-name)
<селектор кадра> — задает селекторы которые определяют ключевые кадры. Они могут принимать значения:

from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%)
to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%)
<процент> — описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства -webkit-animation-duration)

<свойство> — анимируемое CSS свойство
<значение> — значения анимированного свойств в момент, описываемый селектором кадра

Пример кода

CSS

div {
        top:50px;
        left:0px;
        -webkit-animation-name:'movement';
        -webkit-animation-duration:10s;
}
@-webkit-keyframes 'movement' {
    from {
        top:50px;
        left:0px;
    }
    50% {
        top:150px;
        left:100px;
    }
    to {
        top:400px;
        left:300px;
    }   
}

В примере описана анимация перемещения (изменение координат блока с течением времени). В первый момент анимации, описываемый селектором кадра from, координаты блока top:50px, left:0px. Следующий ключевой кадр описывает значения свойств через 50% времени анимации (в данном примере - 5 секунд). Координаты блока станут top:150px, left:100px. В последний момент времени описываемый селектором кадра to (через 10с) блок получит абсолютные координаты top:400px, left:300px. Замечание! Анимация происходит не в три рывка, а плавно.

CSS, CSS Анимация, Анимация

Swiper API

Полный HTML-макет Swiper

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Стили

Пакет Swiper содержит различные наборы стилей CSS, Less и SCSS:

Стили CSS

Стили CSS для версии пакета:

swiper-bundle.css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper-bundle.min.css- такой же, как предыдущий, но уменьшенный

Стили CSS для версии пакета (импорт пакета):

swiper/css— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/css/bundle- такой же, как предыдущий, но уменьшенный

Стили CSS для базовой версии и модулей (импорт пакетов):

swiper/css- только основные стили Swiper
swiper/css/a11y- стили, необходимые для модуля A11y
swiper/css/autoplay- стили, необходимые для модуля автозапуска
swiper/css/controller- стили, необходимые для модуля контроллера
swiper/css/effect-cards- стили, необходимые для модуля Cards Effect
swiper/css/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/css/effect-creative- стили, необходимые для модуля Creative Effect
swiper/css/effect-cube- стили, необходимые для модуля Cube Effect
swiper/css/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/css/effect-flip- стили, необходимые для модуля Flip Effect
swiper/css/free-mode- стили, необходимые для модуля свободного режима
swiper/css/grid- стили, необходимые для модуля Grid
swiper/css/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/css/history- стили, необходимые для модуля Истории
swiper/css/keyboard- стили, необходимые для модуля клавиатуры
swiper/css/manipulation- стили, необходимые для модуля манипулирования
swiper/css/mousewheel- стили, необходимые для модуля Mousewheel
swiper/css/navigation- стили, необходимые для навигационного модуля
swiper/css/pagination- стили, необходимые для модуля разбивки на страницы
swiper/css/parallax- стили, необходимые для модуля Parallax
swiper/css/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/css/thumbs- стили, необходимые для модуля Thumbs
swiper/css/virtual- стили, необходимые для виртуального модуля
swiper/css/zoom- стили, необходимые для модуля масштабирования

Меньше стилей

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

swiper/less- только основные стили Swiper
swiper/less/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/less/a11y- стили, необходимые для модуля A11y
swiper/less/autoplay- стили, необходимые для модуля автозапуска
swiper/less/controller- стили, необходимые для модуля контроллера
swiper/less/effect-cards- стили, необходимые для модуля Cards Effect
swiper/less/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/less/effect-creative- стили, необходимые для модуля Creative Effect
swiper/less/effect-cube- стили, необходимые для модуля Cube Effect
swiper/less/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/less/effect-flip- стили, необходимые для модуля Flip Effect
swiper/less/free-mode- стили, необходимые для модуля свободного режима
swiper/less/grid- стили, необходимые для модуля Grid
swiper/less/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/less/history- стили, необходимые для модуля Истории
swiper/less/keyboard- стили, необходимые для модуля клавиатуры
swiper/less/manipulation- стили, необходимые для модуля манипулирования
swiper/less/mousewheel- стили, необходимые для модуля Mousewheel
swiper/less/navigation- стили, необходимые для навигационного модуля
swiper/less/pagination- стили, необходимые для модуля разбивки на страницы
swiper/less/parallax- стили, необходимые для модуля Parallax
swiper/less/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/less/thumbs- стили, необходимые для модуля Thumbs
swiper/less/virtual- стили, необходимые для виртуального модуля
swiper/less/zoom- стили, необходимые для модуля масштабирования

Стили SCSS

Стили SCSS также являются отдельными стилями для основной версии и модулей (импортируемых пакетов):

swiper/scss- только основные стили Swiper
swiper/scss/bundle— все стили Swiper, включая стили всех модулей (например, навигации, постраничной навигации и т. д.)
swiper/scss/a11y- стили, необходимые для модуля A11y
swiper/scss/autoplay- стили, необходимые для модуля автозапуска
swiper/scss/controller- стили, необходимые для модуля контроллера
swiper/scss/effect-cards- стили, необходимые для модуля Cards Effect
swiper/scss/effect-coverflow- стили, необходимые для модуля Coverflow Effect
swiper/scss/effect-creative- стили, необходимые для модуля Creative Effect
swiper/scss/effect-cube- стили, необходимые для модуля Cube Effect
swiper/scss/effect-fade- стили, необходимые для модуля эффекта затухания
swiper/scss/effect-flip- стили, необходимые для модуля Flip Effect
swiper/scss/free-mode- стили, необходимые для модуля свободного режима
swiper/scss/grid- стили, необходимые для модуля Grid
swiper/scss/hash-navigation- стили, необходимые для модуля навигации по хэшу
swiper/scss/history- стили, необходимые для модуля Истории
swiper/scss/keyboard- стили, необходимые для модуля клавиатуры
swiper/scss/manipulation- стили, необходимые для модуля манипулирования
swiper/scss/mousewheel- стили, необходимые для модуля Mousewheel
swiper/scss/navigation- стили, необходимые для навигационного модуля
swiper/scss/pagination- стили, необходимые для модуля разбивки на страницы
swiper/scss/parallax- стили, необходимые для модуля Parallax
swiper/scss/scrollbar- стили, необходимые для модуля полосы прокрутки
swiper/scss/thumbs- стили, необходимые для модуля Thumbs
swiper/scss/virtual- стили, необходимые для виртуального модуля
swiper/scss/zoom- стили, необходимые для модуля масштабирования

Инициализировать Swiper

Теперь, когда у нас есть HTML-код Swiper, нам нужно инициализировать его с помощью следующей функции:

новый Swiper (swiperContainer, параметры) - инициализирует swiper с помощью опций

swiperContainer — HTMLElement или строка (с CSS-селектором) HTML-элемента контейнера свипера. Обязательно.
параметры - объект - объект с параметрами Swiper. Необязательно.
Метод возвращает инициализированный экземпляр Swiper

Например:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

Послеинициализации Swiper можно получить доступ к экземпляру Swiper в его HTMLElement. Этоswiperсвойство HTML-элемента контейнера Swiper:

const swiper = document.querySelector('.swiper').swiper;

// Now you can use all slider methods like
swiper.slideNext();

Параметры

Давайте посмотрим на список всех доступных параметров:

Имя	Тип	По умолчанию	Описание
a11y	Любой		Объект с параметрами a11y или логический`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { a11y: { prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', }, });`
allowSlideNext	логическое значение	верно	Установите значение`false`для отключения перехода к следующему направлению (вправо или вниз)
allowSlidePrev	логическое значение	верно	Установите значение`false`для отключения перехода к предыдущему направлению скольжения (влево или вверх)
Разрешить касание	логическое значение	верно	Если`false`, то единственный способ переключиться на другой слайд — использовать внешние функции API, такие как slidePrev или slideNext
Автоматический рост	логическое значение	ложь	Задайте значение`true`и обёртка слайдера будет подстраивать свою высоту под высоту активного слайда
автоматическое воспроизведение	Любой		Объект с параметрами автозапуска или логическим значением`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { autoplay: { delay: 5000, }, });`
точки останова	объект		Позволяет задавать разные параметры для разных точек останова (размеров экрана). Не все параметры можно изменить в точках останова, только те, которые не требуют другого макета и логики, например`slidesPerView`,`slidesPerGroup`,`spaceBetween`,`grid.rows`. Такие параметры, как`loop`и`effect`не будут работать `const swiper = new Swiper('.swiper', { // Default parameters slidesPerView: 1, spaceBetween: 10, // Responsive breakpoints breakpoints: { // when window width is >= 320px 320: { slidesPerView: 2, spaceBetween: 20 }, // when window width is >= 480px 480: { slidesPerView: 3, spaceBetween: 30 }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40 } } })` `const swiper = new Swiper('.swiper', { slidesPerView: 1, spaceBetween: 10, // using "ratio" endpoints breakpoints: { '@0.75': { slidesPerView: 2, spaceBetween: 20, }, '@1.00': { slidesPerView: 3, spaceBetween: 40, }, '@1.50': { slidesPerView: 4, spaceBetween: 50, }, } });`
База контрольных точек	«контейнер»\|«окно»	"окно"	База для точек останова (бета-версия). Может быть`window`или`container`. Если установлено значение`window`(по умолчанию), то клавиши точек останова означают ширину окна. Если установлено значение`container`, то клавиши точек останова рассматриваются как ширина контейнера свипера
Эффект карты	Любой		Объект с картами-параметры эффекта `const swiper = new Swiper('.swiper', { effect: 'cards', cardsEffect: { // ... }, });`
Центрирующие оползни	логическое значение	ложь	Если этот параметр включен, слайды центрируются, если количество слайдов меньше`slidesPerView`. Не предназначено для использования в режиме`loop`и`grid.rows`
центрироВанные оползни	логическое значение	ложь	Если`true`, то активное слайд-шоу будет отображаться по центру, а не всегда слева.
Центрированные скользящие границы	логическое значение	ложь	Если`true`, то активный слайд будет центрирован без добавления пробелов в начале и в конце слайдера. Требуется`centeredSlides: true`. Не предназначено для использования с`loop`или`pagination`
containerModifierClass	строка	"swiper-"	Начало CSS-класса модификатора, который можно добавить в контейнер Swiper в зависимости от различных параметров
контроллер	Любой		Объект с параметрами контроллера или логическим значением`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { controller: { inverse: true, }, });`
Эффект coverflowEffect	Любой		Объект с параметрами эффекта Coverflow. `const swiper = new Swiper('.swiper', { effect: 'coverflow', coverflowEffect: { rotate: 30, slideShadows: false, }, });`
createElements	логическое значение	ложь	При включении Swiper автоматически обернет слайды элементом swiper-wrapper и создаст необходимые элементы для навигации, разбивки на страницы и полосы прокрутки, если они включены (с соответствующим объектом параметров или с логическим значением`true`))
Творческий эффект	Любой		Объект с параметрами креативного эффекта const swiper = new Swiper('.swiper', { effect: 'creative', creativeEffect: { prev: { // will set `translateZ(-400px)` on previous slides translate: [0, 0, -400], }, next: { // will set `translateX(100%)` on next slides translate: ['100%', 0, 0], }, }, });
cssMode	логическое значение	ложь	При включении он будет использовать современный CSS Scroll Snap API. Он поддерживает не все функции Swiper, но потенциально может значительно повысить производительность в простых конфигурациях. Это то, что не поддерживается, когда оно включено: Эффект куба `speed`параметр может не иметь никакого эффекта Все события, связанные с началом / завершением перехода (используйте`slideChange`вместо этого) `slidesPerGroup`имеет ограниченную поддержку `simulateTouch`не имеет эффекта, а «перетаскивание» с помощью мыши не работает `resistance`не имеет никакого эффекта `allowSlidePrev/Next` `swipeHandler` Если вы используете его с другими эффектами, особенно с 3D-эффектами, необходимо обернуть содержимое слайда элементом`<div className="swiper-slide-transform">`. И если вы используете какие-либо пользовательские стили для слайдов (например, цвета фона, радиус границы, границу и т. д.), их следует задавать для элемента`swiper-slide-transform`. `<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- wrap slide content with transform element --> <div class="swiper-slide-transform"> ... slide content ... </div> </div> ... </div> </div> <script> const swiper = new Swiper('.swiper', { effect: 'flip', cssMode: true, }); </script>`
Эффект куба	Любой		Объект с параметрами кубического эффекта `const swiper = new Swiper('.swiper', { effect: 'cube', cubeEffect: { slideShadows: false, }, });`
направление	«по горизонтали»\|«по вертикали»	"горизонтальный"	Может быть`'horizontal'`или`'vertical'`(для вертикального слайдера).
Обнаружение кромки	строка\|логическое значение	ложь	Включите события Swiper для работы с возвратом свайпом в приложении. Если установлено значение`'prevent'`, то вместо этого будет предотвращаться системная навигация с возвратом свайпом. Эта функция работает только с событиями «касания» (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя (касания).
edgeSwipeThreshold	номер	20	Область (в пикселях) от левого края экрана для отпускания сенсорных событий при свайпе назад в приложении
эффект	строка	"слайд"	Эффект перехода. Может быть`'slide'`,`'fade'`,`'cube''coverflow'`,`'flip''creative'`,,,,, или`'cards'`
включен	логическое значение	верно	Независимо от того, был ли Swiper изначально включен. Если Swiper отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
eventsPrefix	строка	`swiper`	Префикс имени события для всех событий DOM, генерируемых элементом Swiper (веб-компонентом)
Эффект затухания	Любой		Объект с параметрами эффекта затухания `const swiper = new Swiper('.swiper', { effect: 'fade', fadeEffect: { crossFade: true }, });`
flipEffect	Любой		Объект с параметрами эффекта переворота `const swiper = new Swiper('.swiper', { effect: 'flip', flipEffect: { slideShadows: false, }, });`
Фокусируемые элементы	строка	«ввод, выбор, опция, текстовое поле, кнопка, видео, метка»	Селектор CSS для элементов, на которые можно навести курсор. Свайпинг будет отключен для таких элементов, если они «наведены»
followFinger	логическое значение	верно	Если функция отключена, то ползунок будет анимироваться только при отпускании, он не будет двигаться, пока вы удерживаете на нём палец
Бесплатный режим	Любой		Включает функции бесплатного режима. Объект с параметрами бесплатного режима или логическое значение`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { freeMode: true, }); const swiper = new Swiper('.swiper', { freeMode: { enabled: true, sticky: true, }, });`
grabCursor	логическое значение	ложь	Эта опция может немного улучшить удобство использования Swiper на компьютере. Если`true`, пользователь увидит курсор «захвата» при наведении на Swiper
сетка	Любой		Объект с параметрами сетки для включения ползунка «многострочный». `const swiper = new Swiper('.swiper', { grid: { rows: 2, }, });`
Хэшнавигация	Любой		Включает навигацию по хэш-ссылкам для слайдов. Объект с параметрами хэш-навигации или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { hashNavigation: { replaceState: true, }, });`
высота	нулевой\|номер	null	Высота Swiper (в пикселях). Параметр позволяет задать высоту Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper Установка этого параметра приведет к тому, что Swiper перестанет реагировать
история	Любой		Включает функцию сохранения состояния истории, при которой у каждого слайда будет свой URL-адрес. В этом параметре необходимо указать URL-адрес основного слайда, например`"slides"`и указать URL-адрес каждого слайда с помощью атрибута`data-history`. Объект с параметрами навигации по истории или логическим значением`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { history: { replaceState: true, }, });` `<!-- will produce "slides/slide1" url in browser history --> <div class="swiper-slide" data-history="slide1"></div>`
инициализация	логическое значение	верно	Следует ли инициализировать Swiper автоматически при создании экземпляра. Если эта функция отключена, то вам нужно инициализировать Swiper вручную, вызвав`swiper.init()`
initialSlide	номер	0	Порядковый номер начального слайда.
Инжектные стили	строка[]		Внедрите стили текста в теневой DOM. Только для использования с элементом Swiper
injectStylesUrls	строка[]		Внедрите стили`<link>`в теневой DOM. Только для использования с элементом Swiper
клавиатура	Любой		Позволяет перемещаться по слайдам с помощью клавиатуры. Объект с параметрами клавиатуры или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { keyboard: { enabled: true, onlyInViewport: false, }, });`
lazyPreloadPrevNext	номер	0	Количество следующих и предыдущих слайдов для предварительной загрузки. Применимо только при использовании отложенной загрузки.
Класс lazyPreloaderClass	строка	"swiper-ленивый предварительный загрузчик"	Имя CSS-класса ленивого предварительного загрузчика
Длинные наконечники	логическое значение	верно	Установите значение`false`, если вы хотите отключить длинные прокрутки
longSwipesMs	номер	300	Минимальная продолжительность (в миллисекундах) для перехода к следующему/предыдущему слайду при длительном смахивании
Стратегия длинных свайпов	номер	0.5	Соотношение для перехода к следующему / предыдущему слайду при длительном пролистывании
цикл	логическое значение	ложь	Установите значение`true`, чтобы включить режим непрерывного цикла Из-за особенностей работы режима цикла (он меняет порядок слайдов) общее количество слайдов должно быть: больше или равно`slidesPerView`+`slidesPerGroup` даже для`slidesPerGroup`(или использовать`loopAddBlankSlides`параметр) даже для`grid.rows`(или использовать`loopAddBlankSlides`параметр)
loopAddBlankSlides	логическое значение	верно	Автоматически добавляет пустые слайды, если вы используете сетку или`slidesPerGroup`и общее количество слайдов не равно`slidesPerGroup`или`grid.rows`
loopAdditionalSlides	номер	0	Позволяет увеличить количество закольцованных слайдов
loopPreventsSliding	логическое значение	верно	Если эта функция включена, то кнопки «Далее» и «Назад» не будут работать, пока слайдер анимируется в режиме цикла
maxBackfaceHiddenSlides	номер	10	Если общее количество слайдов меньше указанного здесь значения, то Swiper включит`backface-visibility: hidden`на элементах слайдов, чтобы уменьшить визуальное «мерцание» в Safari. Не рекомендуется включать эту функцию на большом количестве слайдов, так как это снизит производительность
модули	любой[]		Массив с модулями Swiper `import Swiper from 'swiper'; import { Navigation, Pagination } from 'swiper/modules'; const swiper = new Swiper('.swiper', { modules: [ Navigation, Pagination ], });`
колесо мыши	Любой		Позволяет перемещаться по слайдам с помощью колёсика мыши. Объект с параметрами колёсика мыши или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { mousewheel: { invert: true, }, });`
навигация	Любой		Объект с параметрами навигации или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });`
вложенный	логическое значение	ложь	Установите`true`на Swiper для корректного перехвата событий касания. Используйте только на свиперах, которые используют то же направление, что и родительский элемент
Промывка носа	логическое значение	верно	Включать / отключать прокрутку элементов, соответствующих классу, указанному в`noSwipingClass`
noSwipingClass	строка	"swiper-без пролистывания"	Укажите`noSwiping`css-класс элемента
noSwipingSelector	строка		Может использоваться вместо`noSwipingClass`для указания элементов, для которых нужно отключить свайп. Например,`'input'`отключит свайп для всех входов
normalizeSlideIndex	логическое значение	верно	Нормализует индекс слайда.
Наблюдаем за родителями	логическое значение	ложь	Установите значение`true`если вам также нужно отслеживать изменения родительских элементов Swiper
Наблюдает за детьми	логическое значение	ложь	Установите значение`true`если вам также нужно отслеживать изменения для дочерних элементов слайдов Swiper
наблюдатель	логическое значение	ложь	Задайте значение`true`для включения наблюдателя за изменениями в Swiper и его элементах. В этом случае Swiper будет обновляться (перезапускаться) каждый раз, когда вы меняете его стиль (например, скрываете/отображаете) или изменяете дочерние элементы (например, добавляете/удаляете слайды)
вкл .	объект		Регистрация обработчиков событий
На любом	функция(обработчик)		Добавьте прослушиватель событий, который будет запускаться при всех событиях `const swiper = new Swiper('.swiper', { onAny(eventName, ...args) { console.log('Event: ', eventName); console.log('Event data: ', args); } });`
oneWayMovement	логическое значение	ложь	Если эта функция включена, слайды будут прокручиваться только вперёд (в одну сторону) независимо от направления прокрутки
разбивка на страницы	Любой		Объект с параметрами разбивки на страницы или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { pagination: { el: '.swiper-pagination', type: 'bullets', }, });`
параллакс	Любой		Объект с параметрами параллакса или boolean`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { parallax: true, });`
Пассивные прослушиватели	логическое значение	верно	По умолчанию для повышения производительности прокрутки на мобильных устройствах будут использоваться пассивные слушатели событий. Но если вам нужно использовать`e.preventDefault`и у вас возникает конфликт с ним, то вам следует отключить этот параметр
Предотвращение щелчков	логическое значение	верно	Установите значение`true`для предотвращения случайных нежелательных переходов по ссылкам во время прокрутки
Предотвращение распространения Clicksprop	логическое значение	верно	Установите значение`true`, чтобы остановить распространение событий кликов по ссылкам во время прокрутки
Предотвращение взаимодействия при переходе	логическое значение	ложь	Если эта функция включена, она не позволит менять слайды с помощью свайпа или кнопок навигации/пагинации во время перехода
сопротивление	логическое значение	верно	Установите значение`false`, если вы хотите отключить устойчивые границы
Сопротивление	номер	0.85	Эта опция позволяет вам контролировать коэффициент сопротивления
Сервер изменения размера	логическое значение	верно	Если эта функция включена, она будет использовать ResizeObserver (если поддерживается браузером) для контейнера Swiper, чтобы определять изменение размера контейнера (вместо отслеживания изменения размера окна)
перемотка назад	логическое значение	ложь	Установите значение`true`для включения режима «перемотки». При включенном режиме нажатие кнопки «следующий слайд» (или вызов`.slideNext()`) при нахождении на последнем слайде приведет к переходу на первый слайд. Нажатие кнопки «предыдущий слайд» (или вызов`.slidePrev()`) при нахождении на первом слайде приведет к переходу на последний слайд. Не следует использовать вместе с`loop`mode
Длина круга	логическое значение	ложь	Задайте`true`для округления значений ширины и высоты слайдов, чтобы текст не был размытым на экранах с обычным разрешением (если у вас такие есть)
runCallbacksOnInit	логическое значение	верно	При инициализации свипера запускаются события Transition/SlideChange/Start/End. Такие события будут запускаться при инициализации, если ваш initialSlide не равен 0 или вы используете режим цикла
полоса прокрутки	Любой		Объект с параметрами полосы прокрутки или логическим значением`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, });`
setWrapperSize	логическое значение	ложь	Если вы включите эту опцию, плагин установит ширину/высоту оболочки Swiper, равную общему размеру всех слайдов. В основном эту опцию следует использовать в качестве запасного варианта совместимости для браузеров, которые плохо поддерживают макет flexbox
Короткие замахи	логическое значение	верно	Установите значение`false`, если вы хотите отключить короткие прокрутки
simulateTouch	логическое значение	верно	Если`true`Swiper будет принимать события мыши, такие как события касания (щелкните и перетащите для смены слайдов)
slideActiveClass	строка	"swiper-slide-активный"	Имя CSS-класса текущего активного слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в компонентах Swiper React / Vue
slideBlankClass	строка	"swiper-slide-пустой"	Имя CSS-класса пустого слайда, добавляемого в режиме цикла (при включении`loopAddBlankSlides`). Не поддерживается в Swiper React / Vue
slideClass	строка	"swiper-слайд"	Имя CSS-класса слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в компонентах Swiper React / Vue
slideFullyVisibleClass	строка	"swiper-слайд-полностью-виден"	Имя CSS-класса для полностью (когда весь слайд находится в области просмотра) видимого слайда Не поддерживается в Swiper React / Vue
slideNextClass	строка	"swiper-slide-next"	Имя CSS-класса слайда, которое находится сразу после текущего активного слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slidePrevClass	строка	'swiper-slide-предыдущий'	CSS-класс slide, который находится прямо перед текущим активным слайдом При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slideToClickedSlide	логическое значение	ложь	Установите значение`true`и нажмите на любой слайд, чтобы перейти к этому слайду
slideVisibleClass	строка	"видимый слайд swiper"	Имя CSS-класса текущего / частично видимого слайда При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
slidesoffset после	номер	0	Добавьте (в пикселях) дополнительное смещение слайда в конце контейнера (после всех слайдов)
slidesOffsetBefore	номер	0	Добавьте (в пикселях) дополнительное смещение слайда в начале контейнера (перед всеми слайдами)
slidesPerGroup	номер	1	Задайте количество слайдов для определения и включения группового скольжения. Полезно использовать с slidesPerView > 1
slidesPerGroupAuto	логическое значение	ложь	Этот параметр предназначен для использования только с`slidesPerView: 'auto'`и`slidesPerGroup: 1`. Если он включен, то при вызове методов`.slideNext()`и`.slidePrev()`будут пропускаться все слайды в режиме просмотра, при нажатии «кнопок» навигации и при автозапуске.
slidesPerGroupSkip	номер	0	Параметр работает следующим образом: Если`slidesPerGroupSkip`равно`0`(по умолчанию), слайды не исключаются из группировки, и результат будет таким же, как и без этого изменения. Если`slidesPerGroupSkip`равно или больше`1`, то первые X слайдов рассматриваются как отдельные группы, а все последующие слайды группируются по значению`slidesPerGroup`
Просмотр слайдов	номер\|"авто"	1	Количество слайдов на один просмотр (количество слайдов, одновременно отображаемых в контейнере слайдера). `slidesPerView: 'auto'`в настоящее время не поддерживается многострочный режим, когда`grid.rows`> 1
Расстояние между	строка\|номер	0	Расстояние между слайдами в пикселях. Если вы используете свойство CSS «margin» для элементов, которые входят в Swiper и в которые вы передаёте параметр «spaceBetween», навигация может работать некорректно.
Скорость	номер	300	Продолжительность перехода между слайдами (в мс)
Манипулятор прокрутки	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с разбивкой на страницы, которая будет работать как единственный доступный обработчик для прокрутки
swiperElementNodeName	строка	"SWIPER-КОНТЕЙНЕР"	Имя узла элемента swiper; используется для определения рендеринга веб-компонента
пороговое значение	номер	5	Пороговое значение в пикселях. Если «расстояние касания» будет меньше этого значения, то свиппер не будет перемещаться
большие пальцы	Любой		Объект с параметрами компонента thumbs `const swiper = new Swiper('.swiper', { ... thumbs: { swiper: thumbsSwiper } });`
Touchangle'а	номер	45	Допустимый угол (в градусах) для запуска сенсорного перемещения
touchEventsTarget	'контейнер'\|'обёртка'	"оболочка"	Целевой элемент для прослушивания событий касания. Может быть`'container'`(для прослушивания событий касания на слайдере) или`'wrapper'`(для прослушивания событий касания на оболочке слайдера)
touchMoveStopPropagation	логическое значение	ложь	Если эта функция включена, то распространение события «касание» будет остановлено
Сенсорное управЛение	номер	1	Коэффициент соприкосновения
touchReleaseOnEdges	логическое значение	ложь	Включите отработку событий касания в крайних положениях ползунка (начало, конец), чтобы обеспечить дальнейшую прокрутку страницы. Эта функция работает только с событиями касания (а не с событиями указателя), поэтому она будет работать на устройствах iOS/Android и не будет работать на устройствах Windows с событиями указателя. Также`threshold`параметр должен быть установлен на`0`
touchStartForcePreventDefault	логическое значение	ложь	Принудительно всегда предотвращать событие по умолчанию для`touchstart`(`pointerdown`)
touchStartPreventDefault	логическое значение	верно	Если он отключен,`pointerdown`событие не будет предотвращено
Уникальные возможности	логическое значение	верно	Если включено (по умолчанию) и параметры элементов навигации передаются в виде строки (например,`".pagination"`), то Swiper сначала будет искать такие элементы среди дочерних элементов. Применяется для нумерации страниц, кнопок «предыдущая»/«следующая» и элементов полосы прокрутки
Обновите размер окна	логическое значение	верно	Swiper будет пересчитывать положение слайдов при изменении размера окна (ориентации)
url	нулевая\|строка	null	Требуется для активного обнаружения слайдов при рендеринге на стороне сервера и включенной истории
Пользовательский агент	нулевая\|строка	null	строка userAgent. Требуется для определения браузера/устройства при рендеринге на стороне сервера
виртуальный	Любой		Включает функцию виртуальных слайдов. Объект с параметрами виртуальных слайдов или логическое значение`true`для включения с настройками по умолчанию. `const swiper = new Swiper('.swiper', { virtual: { slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'], }, });`
Виртуальный перевод	логическое значение	ложь	Если вы включите эту опцию, слайдер будет работать как обычно, за исключением того, что он не будет перемещаться, а значения реального перемещения на обёртке не будут заданы. Полезно, если вам нужно создать собственный переход слайдов
watchOverflow	логическое значение	верно	При включении Swiper будет отключён и скроет кнопки навигации, если для скольжения недостаточно слайдов.
watchSlidesProgress	логическое значение	ложь	Включите эту функцию, чтобы рассчитать прогресс и видимость каждого слайда (слайды в области просмотра будут иметь дополнительный класс видимости)
ширина	нулевой\|номер	null	Ширина Swiper (в пикселях). Параметр позволяет задать ширину Swiper. Полезно только в том случае, если вы инициализируете Swiper, когда он скрыт, а также в средах SSR и Test для правильной инициализации Swiper Установка этого параметра приведет к тому, что Swiper перестанет реагировать
КЛАСС -оболочка	строка	"swiper-оболочка"	Имя CSS-класса оболочки слайдов При изменении классов вам также потребуется изменить CSS Swiper, чтобы отразить изменения в классах Не поддерживается в Swiper React / Vue
масштабирование	Любой		Включает функцию масштабирования. Объект с параметрами масштабирования или логическое значение`true`для включения с настройками по умолчанию `const swiper = new Swiper('.swiper', { zoom: { maxRatio: 5, }, });`

Методы и свойства

После инициализации Slider мы получаем его инициализированный экземпляр в переменной (например, переменнаяswiperв приведённом выше примере) с полезными методами и свойствами:

Свойства
swiper.a11y	Любой
swiper.activeIndex	номер	Индексный номер текущего активного слайда Обратите внимание, что в режиме цикла значение активного индекса всегда будет смещаться на количество циклов
swiper.allowSlideNext	логическое значение	Отключите / включите возможность перехода к следующим слайдам, присвоив`false`/`true`этому свойству
swiper.allowSlidePrev	логическое значение	Отключите / включите возможность перехода к предыдущим слайдам, присвоив`false`/`true`этому свойству
swiper.allowTouchMove	логическое значение	Отключите / включите возможность перемещать ползунок, захватив его мышью или коснувшись пальцем (на сенсорных экранах), назначив`false`/`true`для этого свойства
swiper.анимация	логическое значение	`true`если swiper находится на переходном этапе
swiper.автозапуск	Любой
swiper.cardэффект	Любой
swiper.clickedIndex	номер	Индексный номер последнего нажатого слайда
swiper.clickedSlide	HTMLЭлемент	Ссылка на слайд, на который щелкнули последним (HTMLElement)
swiper.контроллер	Любой
swiper.coverflowEffect	Любой
swiper.creativeffect	Любой
swiper.cubeEffect	Любой
swiper.defaults	Любой	Параметры Swiper по умолчанию
swiper.el	HTMLЭлемент	HTML-элемент контейнера слайдера
swiper.extendedDefaults	Любой	Объект с глобальными расширенными опциями Swiper
swiper.fadeEffect	Любой
swiper.flipEffect	Любой
swiper.свободный режим	Любой
swiper.хэшнавигация	Любой
swiper.height	номер	Высота контейнера
swiper.история	Любой
swiper.isBeginning	логическое значение	`true`если ползунок находится в крайнем левом/верхнем положении
swiper.isEnd	логическое значение	`true`если ползунок находится в крайнем «правом»/«нижнем» положении
swiper.isLocked	логическое значение	`true`если слайд «заблокирован» (с помощью`watchOverflow`) и слайды не могут быть, например, когда количество слайдов меньше, чем количество просмотров
swiper.клавиатура	Любой
swiper.колесо мыши	Любой
swiper.навигация	Любой
swiper.originalParams	Любой	Объект с исходными параметрами инициализации
swiper.разбивка на страницы	Любой
swiper.параллакс	Любой
swiper.параметры	Любой	Объект с переданными параметрами инициализации
swiper.Предыдущий индекс	номер	Индексный номер ранее активного слайда
swiper.прогресс	номер	Текущий прогресс перевода оболочки (с 0 на 1)
swiper.realIndex	номер	Индексируйте количество активных в данный момент слайдов с учетом переставленных слайдов в режиме цикла
swiper.полоса прокрутки	Любой
swiper.слайды	HTMLЭлемент[]	Массив HTML-элементов slides. Чтобы получить конкретный HTMLЭлемент slide, используйте`swiper.slides[1]`
swiper.snapGrid	номер []	Скользит по сетке привязки
swiper.snapIndex	номер	Индексный номер текущей оснастки`snapGrid`
swiper.swipeDirection	'предыдущая'\|'следующая'	Направление скольжения
swiper.thumbs	Любой
swiper.касания	объект	Объект со следующими свойствами события касания: `swiper.touches.startX` `swiper.touches.startY` `swiper.touches.currentX` `swiper.touches.currentY` `swiper.touches.diff`
swiper.translate	номер	Текущее значение wrapper translate
swiper.virtual	Любой
swiper.width	номер	Ширина контейнера
swiper.wrapperEl	HTMLЭлемент	HTML-элемент-оболочка
swiper.zoom	Любой
Методы
swiper.attachEvents()		Снова подключите все прослушиватели событий
swiper.changeDirection(направление,требуется обновление)		Изменяет направление ползунка с горизонтального на вертикальное и обратно. направление—'горизонтальное'\|'вертикальное'— новое направление. Если не указано, то автоматически изменится на противоположное направление needUpdate—логическое значение— вызовет функцию swiper.update(). По умолчанию true
swiper.changeLanguageDirection(направление)		Изменяет язык слайдера направление—'rtl'\|'ltr'— новое направление. Должно быть `rtl` или `ltr`
swiper.destroy(удаление,чистые стили)		Уничтожьте экземпляр слайдера и отсоедините все прослушиватели событий deleteInstance—логическое значение— установите значение false (по умолчанию оно равно true), чтобы не удалять экземпляр Swiper cleanStyles—логическое значение— установите значение true (по умолчанию оно равно true), и все пользовательские стили будут удалены из слайдов, обертки и контейнера. Полезно, если вам нужно уничтожить Swiper и инициализировать его заново с новыми параметрами или в другом направлении
swiper.detachEvents()		Отсоединить все прослушиватели событий
swiper.отключить()		Отключите Swiper (если он был включён). Когда Swiper будет отключен, он скроет все элементы навигации и не будет реагировать на какие-либо события и взаимодействия
swiper.emit(событие,аргументы)		Событие срабатывания в экземпляре
swiper.enable()		Включить Swiper (если он был отключен)
swiper.extendDefaults(опции)		Расширение глобальных настроек Swiper по умолчанию
swiper.getTranslate()		Получить текущее значение swiper wrapper css3 transform translate
swiper.init(el)		Инициализировать слайдер
swiper.maxTranslate()		Получить текущее максимальное значение перевода
swiper.minTranslate()		Получить текущее минимальное значение перевода
swiper.off(событие,обработчик)		Удалить обработчик событий
swiper.offAny(обработчик)		Удалить прослушиватель событий, который будет запускаться при всех событиях
swiper.on(событие,обработчик)		Добавить обработчик событий
swiper.onAny(обработчик)		Добавьте прослушиватель событий, который будет запускаться при всех событиях
swiper.once(событие,обработчик)		Добавьте обработчик событий, который будет удален после его запуска
swiper.setGrabCursor()		Установить курсор захвата
swiper.setProgress(прогресс,скорость)		Задайте значение прогресса перемещения Swiper (от 0 до 1). Где 0 — начальная позиция (смещение) на первом слайде, а 1 — максимальная позиция (смещение) на последнем слайде прогресс—число— прогресс перевода Swiper (от 0 до 1). скорость-число- Длительность перехода (в мс).
swiper.setTranslate(переводить)		Установите значение translate пользовательского преобразования css3 для swiper wrapper
swiper.slideNext(скорость,обратные вызовы)		Запустите переход к следующему слайду. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidePrev(скорость,обратные вызовы)		Запустите переход к предыдущему слайду. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideReset(скорость,обратные вызовы)		Сбросьте положение слайдера до текущего активного слайда на время, равное параметру «скорость». скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideTo(индекс,скорость,обратные вызовы)		Выполните переход к слайду с номером, равным параметру «index», в течение времени, равного параметру «speed». index-число- порядковый номер слайда. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToClosest(скорость,обратные вызовы)		Сбросьте положение ползунка до ближайшей точки перехода/фиксации на время, равное параметру «скорость». скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slideToLoop(индекс,скорость,выполнить обратные вызовы)		Делает то же самое, что и .slideTo, но для случая, когда используется с включённым циклом. Таким образом, этот метод будет переходить к слайдам с realIndex, соответствующим переданному индексу index-число- порядковый номер слайда. скорость-число- Длительность перехода (в мс). runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода.
swiper.slidesPerViewDynamic()		Получите динамически рассчитываемое количество слайдов на просмотр, полезно только в том случае, если для slidesPerView установлено значение`auto`
swiper.translateTo(translate,скорость,запускать обратные вызовы,переводить границы)		Анимируйте пользовательское значение преобразования CSS3 для обёртки Swiper translate-число- Перевод значения (в пикселях) скорость-количество- Длительность перехода (в мс) runCallbacks—логическое значение— установите значение false (по умолчанию оно равно true), и переход не будет генерировать события перехода translateBounds—логическое значение— установите значение false (по умолчанию оно равно true), и значение перехода может выходить за пределы минимального и максимального значений translate
swiper.unsetGrabCursor()		Сбросить курсор захвата
swiper.update()		Вы должны вызывать его после добавления/удаления слайдов вручную, после их скрытия/показа или выполнения любых пользовательских изменений DOM с помощью Swiper. Этот метод также включает в себя вызов следующих методов, которые можно использовать отдельно:
swiper.updateAutoHeight(скорость)		Заставьте свипер обновлять высоту (при включенном параметре autoHeight) в течение времени, равного параметру «скорость» скорость-число- Длительность перехода (в мс).
swiper.UpdateProgress()		пересчитать прогресс swiper
swiper.updateSize()		пересчитайте размер контейнера swiper
swiper.updateSlides()		пересчитать количество слайдов и их смещения. Полезно после добавления/удаления слайдов с помощью JavaScript
swiper.updateSlidesClasses()		обновите активные / предыдущие / следующие классы на слайдах и маркерах
swiper.use(модули)		Устанавливает модули на Swiper во время выполнения.

Мероприятия

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

Использованиеonпараметра при инициализации swiper:

const swiper = new Swiper('.swiper', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

Использованиеonметода после инициализации swiper.

const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});

Пожалуйста, обратите внимание, чтоthisключевое слово в обработчике событий всегда указывает на экземпляр Swiper

Имя	Аргументы	Описание
activeIndexChange	(swiper)	Событие будет срабатывать при активном изменении индекса
afterInit	(swiper)	Событие будет запущено сразу после инициализации
beforeDestroy	(swiper)	Событие будет запущено непосредственно перед уничтожением Swiper
Перед запуском	(swiper)	Событие будет запущено непосредственно перед инициализацией
beforeLoopFix	(swiper)	Событие будет запущено непосредственно перед "исправлением цикла"
Перед обработкой	(swiper)	Событие будет запущено перед обработчиком изменения размера
beforeSlideChangeStart	(swiper)	Событие будет запущено до начала перехода к смене слайда
Перед началом перехода	(swiper, скорость, внутренний)	Событие будет запущено до начала перехода
точка останова	(swiper, параметры точки останова)	Событие будет запущено при изменении точки останова
Измененное направление	(swiper)	Событие будет запущено при изменении направления
нажмите	(swiper, событие)	Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получает`pointerup`событие в качестве аргумента.
уничтожить	(swiper)	Событие будет запущено при уничтожении swiper
Двойной щелчок	(swiper, событие)	Событие будет запущено, когда пользователь дважды щелкнет по Swiper
Двойной щелчок	(swiper, событие)	Событие будет запущено, когда пользователь дважды коснётся контейнера Swiper. Получает`pointerup`событие в качестве аргумента
fromEdge	(swiper)	Событие будет запущено, когда Swiper перейдет из начальной или конечной позиции
инициализация	(swiper)	Сработал сразу после инициализации Swiper. Обратите внимание, что синтаксис`swiper.on('init')`будет работать только в том случае, если вы зададите параметр`init: false` `const swiper = new Swiper('.swiper', { init: false, // other parameters }); swiper.on('init', function() { // do something }); // init Swiper swiper.init();` `// Otherwise use it as the parameter: const swiper = new Swiper('.swiper', { // other parameters on: { init: function () { // do something }, } });`
блокировка	(swiper)	Событие будет запущено, когда swiper заблокирован (когда`watchOverflow`включено)
Исправление цикла	(swiper)	Событие будет запущено после "исправления цикла"
Мгновенный скачок	(swiper)	Событие будет запущено при отскоке импульса
Обновление наблюдения	(swiper)	Событие будет запущено, если observer включен и он обнаруживает мутации DOM
изменение ориентации	(swiper)	Событие будет запущено при изменении ориентации (например, альбомная -> портретная)
прогресс	(swiper, прогресс)	Событие будет запущено при изменении прогресса Swiper. В качестве аргументов оно получает прогресс, который всегда находится в диапазоне от 0 до 1
Начало работы	(swiper)	Событие будет запущено, когда Swiper достигнет своего начала (начальной позиции)
reachEnd	(swiper)	Событие будет запущено, когда Swiper достигнет последнего слайда
Реальный обмен данными	(swiper)	Событие будет запущено при реальном изменении индекса
изменение размера	(swiper)	Событие будет запущено при изменении размера окна непосредственно перед обработкой Swiper onresize
setTransition	(swiper, переход)	Событие будет срабатывать каждый раз, когда свиппер запускает анимацию. Получает в качестве аргумента текущую продолжительность перехода (в миллисекундах)
setTranslate	(swiper, перевести)	Событие будет запущено, когда обёртка Swiper изменит своё положение. Получает текущее значение перевода в качестве аргумента
Изменение слайдов	(swiper)	Событие будет запущено при изменении текущего активного слайда
slideChangeTransitionEnd	(swiper)	Событие будет запущено после анимации другого слайда (следующего или предыдущего).
slideChangeTransitionStart	(swiper)	Событие будет запущено в начале перехода на другой слайд (следующий или предыдущий).
slideNextTransitionEnd	(swiper)	То же, что и «slideChangeTransitionEnd», но только для направления «вперёд»
slideNextTransitionStart	(swiper)	То же, что и «slideChangeTransitionStart», но только для направления «вперёд»
slidePrevTransitionEnd	(swiper)	То же, что и «slideChangeTransitionEnd», но только для «обратного» направления
slidePrevTransitionStart	(swiper)	То же, что и «slideChangeTransitionStart», но только в направлении «назад»
slideResetTransitionEnd	(swiper)	Событие будет запущено в конце анимации при переходе на следующий слайд
slideResetTransitionStart	(swiper)	Событие будет запущено в начале анимации перехода на текущий слайд
sliderFirstMove	(swiper, событие)	Событие будет запущено при первом касании / перетаскивании
sliderMove	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получает`pointermove`событие в качестве аргумента.
slidesGridLengthChange	(swiper)	Событие будет запущено при изменении сетки слайдов
Изменение длины слайда	(swiper)	Событие будет запущено при изменении количества слайдов
Обновлено слайд-шоу	(swiper)	Событие будет запущено после того, как слайды и их размеры будут рассчитаны и обновлены
snapGridLengthChange	(swiper)	Событие будет запущено при изменении привязки сетки
snapIndexChange	(swiper)	Событие будет запущено при изменении индекса привязки
нажмите	(swiper, событие)	Событие будет запущено, когда пользователь нажмёт/коснётся Swiper. Получает`pointerup`событие в качестве аргумента.
toEdge	(swiper)	Событие будет запущено, когда Swiper перейдет в начальную или конечную позицию
touchEnd	(swiper, событие)	Событие будет запущено, когда пользователь отпустит Swiper. Получает`pointerup`событие в качестве аргумента.
touchMove	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт по нему пальцем. Получает`pointermove`событие в качестве аргумента.
touchMoveOpposite	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper и проведёт пальцем в направлении, противоположном параметру направления. Получает`pointermove`событие в качестве аргумента.
Сенсорный запуск	(swiper, событие)	Событие будет запущено, когда пользователь коснётся Swiper. Получает`pointerdown`событие в качестве аргументов.
Завершение перехода	(swiper)	Событие будет запущено после перехода.
Начало перехода	(swiper)	Событие будет запущено в начале перехода.
разблокировать	(swiper)	Событие будет запущено, когда swiper будет разблокирован (когда`watchOverflow`включено)
Обновить	(swiper)	Событие будет запущено после вызова swiper.update()

Модули

Имя	Тип	По умолчанию	Описание
Отключенный класс	строка	"swiper-кнопка-отключена"	Имя класса CSS добавляется к кнопке навигации, когда она становится отключенной
включен	логическое значение		Логическое свойство для использования с точками останова, чтобы включить/отключить навигацию по определённым точкам останова
Скрытый класс	строка	"swiper-кнопка-скрыта"	Имя класса CSS добавляется к кнопке навигации, когда она становится скрытой
Скрытый клик	логическое значение	ложь	Переключать видимость кнопок навигации после нажатия на контейнер слайдера
Класс блокировки	строка	"swiper-блокировка кнопок"	Имя класса CSS добавляется к кнопке навигации, когда она отключена
navigationDisabledClass	строка	"swiper-навигация-отключена"	Имя CSS-класса добавлено в контейнер swiper, когда навигация отключена точкой останова
nextEl	Любой	null	Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «Далее» после нажатия на неё
превЕл	Любой	null	Строка с CSS-селектором или HTML-элементом элемента, который будет работать как кнопка «предыдущая» после нажатия на неё

Свойства
swiper.nextEl	HTMLЭлемент	HTMLЭлемент навигационной кнопки "далее"
swiper.превЕл	HTMLЭлемент	HTMLЭлемент кнопки навигации "предыдущий"
Методы
swiper.уничтожить()		Уничтожить навигацию
swiper.init()		Инициализация навигации
swiper.update()		Обновить состояние кнопок навигации (включено / отключено)

Имя	Аргументы	Описание
Скрытая навигация	(swiper)	Событие будет запущено при скрытии навигации
navigationNext	(swiper)	Событие будет запущено при следующем нажатии кнопки навигации
Руководство по навигации	(swiper)	Событие будет запущено при нажатии предыдущей кнопки навигации
Навигационное шоу	(swiper)	Событие будет запущено при показе навигации

 {
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
}

Разбивка на страницы

Параметры разбивки на страницы

Имя	Тип	По умолчанию	Описание
bulletActiveClass	строка	"swiper-разбивка на страницы-маркер-активен"	Имя CSS-класса для маркера разбиения на страницы, активного в данный момент
Маркированный класс	строка	"swiper-разбивка на страницы-маркер"	Имя CSS-класса для отдельного маркера разбивки на страницы
bulletElement	строка	"диапазон"	Определяет, какой HTML-тег будет использоваться для отображения одиночной кнопки постраничной навигации. Только для`'bullets'`типа постраничной навигации.
кликабельный	логическое значение	ложь	Если`true`то нажатие на кнопку разбивки на страницы приведёт к переходу на соответствующий слайд. Только для типа разбивки на страницы с помощью маркеров
clickableClass	строка	"swiper-разбивка на страницы-кликабельный"	Имя CSS-класса устанавливается в разбивку на страницы, когда оно доступно для кликабельности
Текущий класс	строка	"swiper-разбивка на страницы-текущая"	Имя CSS-класса элемента с текущим активным индексом в «фрагментарной» разбивке на страницы
Динамические пакеты	логическое значение	ложь	Рекомендуется включить эту функцию, если вы используете нумерацию слайдов с помощью маркеров. Таким образом, одновременно будет отображаться только несколько маркеров.
dynamicMainBullets	номер	1	Количество основных маркеров, видимых при`dynamicBullets`включении.
el	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с разбиением на страницы
включен	логическое значение		Логическое свойство для использования с точками останова, чтобы включить/отключить разбиение на страницы в определённых точках останова
formatFractionCurrent	функция (номер)		отформатируйте дробную часть текущего номера. Функция получает текущий номер, и вам нужно вернуть отформатированное значение
formatFractionTotal	функция (номер)		отформатируйте общее количество разбиений на страницы. Функция получает общее количество, и вам нужно вернуть отформатированное значение
Скрытый класс	строка	"swiper-разбиение на страницы-скрыто"	Имя класса CSS для разбивки на страницы, когда он становится неактивным
Скрытый клик	логическое значение	верно	Переключение (скрытие/показ) видимости контейнера разбивки на страницы после нажатия на контейнер слайдера
Горизонтальный класс	строка	"swiper-разбивка на страницы-горизонтальная"	Имя CSS-класса, заданное для разбиения на страницы в горизонтальном Swiper
Класс блокировки	строка	'swiper-блокировка разбивки на страницы'	Имя класса CSS устанавливается в разбивку на страницы, когда оно отключено
Модифицирующий класс	строка	'swiper-разбивка на страницы-'	Начало имени CSS-класса модификатора, который будет добавлен к разбивке на страницы в зависимости от параметров
paginationDisabledClass	строка	"swiper-разбивка на страницы-отключена"	Имя CSS-класса, добавляемое к контейнеру Swiper и элементу разбивки на страницы, когда разбивка на страницы отключена из-за точки останова
progressbarFillClass	строка	"swiper-разбивка на страницы-панель выполнения-заполнение"	Имя CSS-класса элемента заполнения панели прогресса разбивки на страницы
progressbaroposite	логическое значение	ложь	Делает индикатор выполнения противоположным параметру Swiper`direction`: вертикальный индикатор выполнения для горизонтального направления Swiper и горизонтальный индикатор выполнения для вертикального направления Swiper
progressbarOppositeClass	строка	«swiper-pagination-progressbar-opposite»	Имя CSS-класса панели прогресса разбивки на страницы напротив
renderBullet	функция (индекс,имя_класса)		Этот параметр позволяет полностью настроить маркеры нумерации страниц. Вам нужно передать сюда функцию, которая принимает`index`количество маркеров нумерации страниц и имя класса необходимого элемента (`className`). Только для`'bullets'`типа нумерации `const swiper = new Swiper('.swiper', { //... renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } });`
Настройка визуализации	функция (swiper,текущий,общий)		Этот параметр необходим для типа разбиения на страницы`'custom'`, где нужно указать способ отображения. `const swiper = new Swiper('.swiper', { //... renderCustom: function (swiper, current, total) { return current + ' of ' + total; } });`
Преобразование рендеринга	функция (currentClass,totalClass)		Этот параметр позволяет настроить «дробную» нумерацию страниц в HTML. Только для`'fraction'`типа нумерации `const swiper = new Swiper('.swiper', { //... renderFraction: function (currentClass, totalClass) { return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>'; } });`
renderProgressbar	функция(progressbarFillClass)		Этот параметр позволяет настроить «прогрессивную» разбивку на страницы. Только для`'progress'`типа разбивки на страницы `const swiper = new Swiper('.swiper', { //... renderProgressbar: function (progressbarFillClass) { return '<span class="' + progressbarFillClass + '"></span>'; } });`
Общий класс	строка	"swiper-разбивка на страницы-всего"	Имя CSS-класса элемента с общим количеством «отрывков» в «дробной» нумерации
Тип	'индикатор выполнения'\|'маркеры'\|'дробь'\|'пользовательский'	"пули"	Строка с типом нумерации страниц. Может быть`'bullets'`,`'fraction'`,`'progressbar'`или`'custom'`
Вертикальный класс	строка	"swiper-разбивка на страницы-по вертикали"	Имя CSS-класса, заданное для разбиения на страницы в вертикальном Swiper

Методы разбивки на страницы

Свойства
swiper.пули	HTMLЭлемент[]	Массив HTML-элементов маркеров разбивки на страницы. Чтобы получить конкретный HTML-элемент слайда, используйте`swiper.pagination.bullets[1]`.
swiper.el	HTMLЭлемент	HTMLЭлемент элемента контейнера для разбивки на страницы
Методы
swiper.уничтожить()		Уничтожить разбивку на страницы
swiper.init()		Инициализировать разбивку на страницы
swiper.render()		Визуализировать макет разбивки на страницы
swiper.update()		Обновить состояние разбивки на страницы (включено / отключено / активно)

События разбивки на страницы

Имя	Аргументы	Описание
Отображение страниц	(swiper)	Событие будет запущено при разбиении на страницы скрыть
paginationRender	(swiper, paginationEl)	Событие будет запущено после отображения разбивки на страницы
Отображение страниц	(swiper)	Событие будет запущено при разбиении на страницы show
Обновление страницы	(swiper, paginationEl)	Событие будет запущено при обновлении разбивки на страницы

Пользовательские свойства CSS Разбиения на страницы

 {
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

Полоса прокрутки

Параметры полосы прокрутки

Имя	Тип	По умолчанию	Описание
Класс перетаскивания	строка	"swiper-полоса прокрутки-перетаскивание"	CSS-класс перетаскиваемого элемента полосы прокрутки
Размер перетаскивания	номер\|"авто"	"авто"	Размер перетаскиваемого элемента полосы прокрутки в пикселях
перетаскиваемый	логическое значение	ложь	Установите значение`true`для включения перетаскивания полосы прокрутки, что позволит вам управлять положением ползунка
el	Любой	null	Строка с CSS-селектором или HTML-элементом контейнера с полосой прокрутки.
включен	логическое значение		Логическое свойство для использования с точками останова для включения/отключения полосы прокрутки в определённых точках останова
скрыть	логическое значение	верно	Автоматически скрывает полосу прокрутки после взаимодействия с пользователем
Горизонтальный класс	строка	"swiper-полоса прокрутки-горизонтальная"	Имя класса CSS, заданное как полоса прокрутки в горизонтальном Swiper
Класс блокировки	строка	"swiper-полоса прокрутки-блокировка"	Элемент полосы прокрутки - дополнительный CSS-класс, когда он отключен
scrollbarDisabledClass	строка	"swiper-полоса прокрутки-отключена"	Имя CSS-класса, добавляемого к контейнеру Swiper и элементу полосы прокрутки, когда полоса прокрутки отключена в точке останова
snapOnRelease	логическое значение	ложь	Установите значение`true`для привязки положения ползунка к слайдам при отпускании полосы прокрутки
Вертикальный класс	строка	"swiper-полоса прокрутки-вертикальная"	Имя класса CSS, заданное как полоса прокрутки в вертикальном Swiper

Методы полосы прокрутки

Свойства
swiper.dragEl	HTMLЭлемент	HTMLЭлемент перетаскиваемого элемента обработчика полосы прокрутки
swiper.el	HTMLЭлемент	HTMLЭлемент элемента контейнера полосы прокрутки
Методы
swiper.уничтожить()		Уничтожить полосу прокрутки
swiper.init()		Инициализировать полосу прокрутки
swiper.setTranslate()		Обновляет перевод полосы прокрутки
swiper.updateSize()		Обновляет дорожку полосы прокрутки и размеры обработчика

События полосы прокрутки

Имя	Аргументы	Описание
scrollbarDragEnd	(swiper, событие)	Событие будет запущено при перетаскивании перетаскиваемой полосы прокрутки
scrollbarDragMove	(swiper, событие)	Событие будет запущено при перетаскивании полосы прокрутки drag move
scrollbarDragStart	(swiper, событие)	Событие будет запущено при запуске перетаскиваемой полосы прокрутки drag start

Пользовательские свойства CSS полосы прокрутки

 {
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
}

Автоматическое воспроизведение

Параметры автозапуска

Имя	Тип	По умолчанию	Описание
задержка	номер	3000	Задержка между переходами (в мс). Если этот параметр не указан, автоматическая игра будет отключена Если вам нужно указать разную задержку для определённых слайдов, вы можете сделать это с помощью атрибута`data-swiper-autoplay`(в миллисекундах) на слайде. `<!-- hold this slide for 2 seconds --> <div class="swiper-slide" data-swiper-autoplay="2000">`
отключениевзаимодействия	логическое значение	верно	Установите значение`false`и автозапуск не будет отключаться после взаимодействия с пользователем (пролистывания), он будет запускаться каждый раз после взаимодействия
pauseOnMouseEnter	логическое значение	ложь	Если функция включена, автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.
Обратное направление	логическое значение	ложь	Включает автозапуск в обратном направлении
stopOnLastSlide	логическое значение	ложь	Включите этот параметр, и автоматическое воспроизведение будет остановлено, когда вы дойдёте до последнего слайда (не действует в режиме повтора)
Ожидание перехода	логическое значение	верно	При включённой функции автозапуска будет ожидаться завершение перехода оболочки. Можно отключить в случае использования Virtual Translate, когда ваш слайдер может не иметь перехода

Методы автозапуска

Свойства
swiper.приостановлено	логическое значение	Приостановлено ли автозапуск
swiper.running	логическое значение	Включено ли и работает ли автозапуск
swiper.TimeLeft	номер	Если автовоспроизведение приостановлено, отображается оставшееся время (в мс) до перехода к следующему слайду
Методы
swiper.pause()		Приостановить автозапуск
swiper.resume()		Возобновить автозапуск
swiper.start()		Запустить автозапуск
swiper.stop()		Остановить автозапуск

Автоматическое воспроизведение событий

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

Бесплатный режим

Параметры свободного режима

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Включен ли бесплатный режим
Минимальная скорость	номер	0.02	Минимальная скорость касания, необходимая для запуска импульса в свободном режиме
импульс	логическое значение	верно	Если включен, слайд будет продолжать двигаться некоторое время после того, как вы его отпустите
Мгновенный скачок	логическое значение	верно	Установите значение`false`, если вы хотите отключить отскок импульса в бесплатном режиме
Мгновенное переключение	номер	1	Более высокое значение создает больший эффект отскока импульса
Мгновенный анализ	номер	1	Более высокое значение создает большее расстояние импульса после того, как вы отпустите ползунок
Мгновенная скорость	номер	1	Более высокое значение приводит к увеличению скорости вращения после отпускания ползунка
липкий	логическое значение	ложь	Установите значение включено, чтобы включить привязку к позициям слайдов в свободном режиме

Сетка

Параметры сетки

Имя Тип По умолчанию Описание

Имя	Тип	По умолчанию	Описание
заполнение	'строка'\|'столбец'	"столбец"	Может быть`'column'`или`'row'`. Определяет, как слайды должны заполнять строки, по столбцам или по строкам при использовании в режиме повтора убедитесь, что количество слайдов указано в требованиях к режиму повтора, или включите параметр`loopAddBlankSlides`
строки	номер	1	Количество строк слайдов для многострочной компоновки

заполнение

'строка'|'столбец'

"столбец"

Может быть'column'или'row'. Определяет, как слайды должны заполнять строки, по столбцам или по строкам

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

строки

номер

Количество строк слайдов для многострочной компоновки

Манипуляции

Удалить

Добавить

Модуль манипуляций добавляет полезные методы Swiper для управления слайдами. Его имеет смысл использовать только с версией Swiper Core, он не предназначен для использования с Swiper React или Vue.

Методы манипулирования

Методы
swiper.addSlide(индекс,слайды)		Добавьте новые слайды в нужный индекс. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например: `addSlide(1, '<div class="swiper-slide">Slide 10"</div>') addSlide(1, [ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);`
swiper.appendSlide(слайды)		Добавьте новые слайды в конец. Слайды могут быть HTMLElement или HTML-строкой с новым слайдом или массивом таких слайдов, например: `appendSlide('<div class="swiper-slide">Slide 10"</div>') appendSlide([ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);`
swiper.prependSlide(слайды)		Добавьте новые слайды в начало. Слайды могут быть HTMLElement или строкой HTML с новым слайдом или массивом таких слайдов, например: `prependSlide('<div class="swiper-slide">Slide 0"</div>') prependSlide([ '<div class="swiper-slide">Slide 1"</div>', '<div class="swiper-slide">Slide 2"</div>' ]);`
swiper.removeAllSlides()		Удалить все слайды
swiper.удаляет слайд(slideIndex)		Удалите выбранные слайды. slideIndex может быть числом с индексом слайда для удаления или массивом с индексами. `removeSlide(0); // remove first slide removeSlide([0, 1]); // remove first and second slides removeAllSlides(); // Remove all slides`

Параллакс

Swiper поддерживает эффекты перехода с эффектом параллакса для вложенных элементов swiper/slides. Поддерживаются два типа элементов с эффектом параллакса:

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

Чтобы включить эффект параллакса, необходимо инициализировать Swiper с помощью переданного параметраparallax:trueи добавить один из следующих (или их сочетание) атрибутов к нужным элементам:

data-swiper-parallax- включить преобразование-перевод параллаксного перехода. Этот атрибут может принимать:
- number- значение в пикселях (как для заголовка, подзаголовка в примере выше) для перемещения элемента в зависимости от прогресса. В этом случае такой элемент будет перемещён на ± это значение в пикселях в зависимости от положения слайда (следующий или предыдущий)
- percentage- (как для «параллакс-фона») для перемещения элемента в зависимости от прогресса и его размера. В этом случае такой элемент будет перемещён на ± этот процент от его размера (ширины в горизонтальном направлении и высоты в вертикальном направлении) в зависимости от положения слайда (следующий или предыдущий). Таким образом, если ширина элемента составляет 400 пикселей, а вы указали data-swiper-parallax = «50%», то он будет перемещён на ± 200 пикселей
data-swiper-parallax-xто же самое, но для направления по оси x
data-swiper-parallax-yто же самое, но для направления по оси y
data-swiper-parallax-scale— коэффициент масштабирования элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
data-swiper-parallax-opacity— непрозрачность элемента параллакса, когда он находится в «неактивном» (не на активном слайде) состоянии
data-swiper-parallax-duration- настраиваемая продолжительность перехода для элементов parallax

<div class="swiper">
  <!-- Parallax background element -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    data-swiper-parallax="-23%"
  ></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Each slide has parallax title -->
      <div class="title" data-swiper-parallax="-100">Slide 1</div>
      <!-- Parallax subtitle -->
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <!-- And parallax text with custom transition duration -->
      <div
        class="text"
        data-swiper-parallax="-300"
        data-swiper-parallax-duration="600"
      >
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <!-- Opacity parallax -->
      <div data-swiper-parallax-opacity="0.5">I will change opacity</div>
      <!-- Scale parallax -->
      <div data-swiper-parallax-scale="0.15">I will change scale</div>
    </div>
    ...
  </div>
</div>

Параметры Параллакса

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Включите, если вы хотите использовать «параллаксовые» элементы внутри слайдера

Отложенная загрузка

Начиная с версии 9 у Swiper нет специального API для отложенной загрузки, так как он полагается на встроенную функцию отложенной загрузки браузера. Чтобы использовать отложенную загрузку, нам нужно просто установитьloading="lazy"для изображений и добавить элемент предварительной загрузки:

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Lazy image -->
    <div class="swiper-slide">
      <img src="path/to/picture-1.jpg" loading="lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>

    <!-- Lazy image with srcset -->
    <div class="swiper-slide">
      <img
        src="path/to/logo-small.png"
        srcset="path/to/logo-large.png 2x"
        loading="lazy"
      />
      <div class="swiper-lazy-preloader"></div>
    </div>
  </div>
</div>

Как вы видите:

Ленивое изображение должно иметьloading="lazy"атрибут
Добавьте на слайд анимированный индикатор загрузки, который будет удалён автоматически после загрузки изображения:

<div class="swiper-lazy-preloader"></div>

Или белый для темного макета:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

Эффект затухания

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'fade'

Обратите внимание, чтоcrossFadeследует заменить наtrue, чтобы не видеть содержимое позади или под ним.

Параметры эффекта затухания

Имя	Тип	По умолчанию	Описание
Перекрестное затухание	логическое значение	ложь	Позволяет слайдам перекрестно исчезать

Эффект Coverflow

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'coverflow'

Параметры эффекта Coverflow

Имя	Тип	По умолчанию	Описание
глубина	номер	100	Смещение глубины в пикселях (слайды перемещаются по оси Z)
модификатор	номер	1	Множитель эффекта
вращать	номер	50	Поворот слайда в градусах
масштабирование	номер	1	Эффект масштабирования слайдов
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах
растягивание	номер	0	Растянуть пространство между слайдами (в пикселях)

Эффект переворота

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'flip'

Параметры эффекта переворота

Имя	Тип	По умолчанию	Описание
Ограничение скорости	логическое значение	верно	Ограничение вращения краевых слайдов
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Эффект куба

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'cube'

Параметры эффекта куба

Имя	Тип	По умолчанию	Описание
тень	логическое значение	верно	Включает тень основного слайдера
shadowOffset	номер	20	Основное смещение тени в пикселях
Масштабирование теней	номер	0.94	Коэффициент масштабирования основной тени
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Эффект карт

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'cards'

Параметры эффекта карт

Имя	Тип	По умолчанию	Описание
perSlideOffset	номер	8	Расстояние смещения для каждого слайда (в пикселях)
perSlideRotate	номер	2	Угол поворота для каждого слайда (в градусах)
вращать	логическое значение	верно	Позволяет вращать карты
Тени для слайдов	логическое значение	верно	Позволяет создавать тени на слайдах

Творческий эффект

Чтобы это сработало, убедитесь, что параметрeffectустановлен на'creative'

Параметры креативного эффекта

Имя	Тип	По умолчанию	Описание
limitProgress	номер	1	Ограничьте прогресс/смещение количеством боковых слайдов. Если`1`, то все слайды после предыдущего/следующего будут иметь одинаковое состояние. Если`2`, то все слайды после второго активного до/после будут иметь одинаковое состояние и т. д.
Далее	creativeffecttransform		Следующие преобразования слайдов. { // Array with translate X, Y and Z values translate: (string \| number)[]; // Array with rotate X, Y and Z values (in deg) rotate?: number[]; // Slide opacity opacity?: number; // Slide scale scale?: number; // Enables slide shadow shadow?: boolean; // Transform origin, e.g. `left bottom` origin?: string; }
перспектива	логическое значение	верно	Включите этот параметр, если ваши пользовательские преобразования требуют 3D-преобразований (`translateZ`,`rotateX`,`rotateY`)
Пред.	creativeffecttransform		Предыдущие преобразования слайдов. Принимает объект следующего типа: { // Array with translate X, Y and Z values translate: (string \| number)[]; // Array with rotate X, Y and Z values (in deg) rotate?: number[]; // Slide opacity opacity?: number; // Slide scale scale?: number; // Enables slide shadow shadow?: boolean; // Transform origin, e.g. `left bottom` origin?: string; }
Умножитель прогресса	номер	1	Позволяет многократно изменять прозрачность слайдов.
shadowPerProgress	логическое значение	ложь	Разделяет «непрозрачность» тени на каждом слайде в зависимости от`limitProgress`(только если включена трансформация теней). Например, при установке`limitProgress: 2`и включении`shadowPerProgress`непрозрачность тени будет равна`0.5`и`1`на двух слайдах рядом с активным. Если этот параметр отключен, все слайды, кроме активного, будут иметь тень с непрозрачностью`1`

Большие пальцы

В дополнение к компонентуControllerSwiper поставляется с компонентом Thumbs, который предназначен для более корректной работы с дополнительным свайпером Thumbs, чем компонент Controller, используемый для синхронизации двух свайперов.

Параметры Thumbs

Имя	Тип	По умолчанию	Описание
autoScrollOffset	номер	0	Позволяет задать, на скольких активных слайдах от края должна автоматически перемещаться прокрутка. Например, если установлено значение 1 и будет активирован последний видимый слайд (1 от края), то будет автоматически прокручиваться
Несколько активных больших пальцев	логическое значение	верно	При включении может быть активировано несколько миниатюр слайдов
slideThumbActiveClass	строка	"swiper-slide-thumb-активный"	Дополнительный класс, который будет добавлен к активированному слайду thumbs swiper
swiper	Любой	null	Экземпляр Swiper, используемый в качестве больших пальцев, или объект с параметрами Swiper для инициализации больших пальцев Swiper
thumbsContainerClass	строка	"swiper-thumbs"	Дополнительный класс, который будет добавлен в thumbs swiper

Методы Thumbs

Свойства
swiper.swiper	Любой	Swiper экземпляр thumbs swiper
Методы
swiper.init()		Инициализировать большие пальцы
swiper.обновление (начальное)		Обновите thumbs

Масштабирование

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

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img src="path/to/image2.jpg" />
      </div>
    </div>
    <div class="swiper-slide">Plain slide with text</div>
    <div class="swiper-slide">
      <!-- Override maxRatio parameter -->
      <div class="swiper-zoom-container" data-swiper-zoom="5">
        <img src="path/to/image1.jpg" />
      </div>
    </div>
  </div>
</div>

Все изображения, которые можно увеличивать, должны быть заключены в элемент div с классомswiper-zoom-container.
По умолчанию предполагается, что вы увеличиваете масштаб одного из элементовimg,pictureилиcanvas. Если вы хотите увеличить масштаб какого-то другого пользовательского элемента, просто добавьте к нему классswiper-zoom-target. Например:
```
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        
        <div
          class="swiper-zoom-target"
          style="background-image: url(...)"
        ></div>
      </div>
    </div>
  </div>
</div>
```
Вы можете переопределить параметрmaxRatioдля конкретных слайдов, используя атрибутdata-swiper-zoomв контейнере масштабирования.

Параметры масштабирования

Имя	Тип	По умолчанию	Описание
Контейнерный класс	строка	"swiper-zoom-контейнер"	Имя CSS-класса контейнера масштабирования
Ограниченный исходный размер	логическое значение	ложь	Если установлено значение true, изображение не будет масштабироваться более чем на 100% от исходного размера
Максимальная скорость	номер	3	Максимальный множитель масштабирования изображения
Минимизация	номер	1	Минимальный множитель масштабирования изображения
переключение	логическое значение	верно	Включение / отключение увеличения двойным касанием слайда
Увеличенный скользящий класс	строка	"swiper-слайд-масштабирование"	Имя CSS-класса увеличенного контейнера

Методы масштабирования

Свойства
swiper.включен	логическое значение	Включен ли модуль масштабирования
swiper.scale	номер	Текущее соотношение масштаба изображения
Методы
swiper.отключить()		Отключить модуль масштабирования
swiper.enable()		Включить модуль масштабирования
swiper.in(соотношение)		Увеличьте изображение текущего активного слайда. При необходимости можно задать собственное соотношение сторон
swiper.out()		Уменьшите масштаб изображения текущего активного слайда
swiper.toggle(событие)		Переключение масштаба изображения текущего активного слайда

Масштабирование событий

Имя	Аргументы	Описание
Изменение масштаба	(swiper, масштабирование, imageEl, slideEl)	Событие будет запущено при изменении масштаба

Управление с клавиатуры

←→

Параметры управления клавиатурой

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Установите значение`true`, чтобы включить управление с клавиатуры
onlyInViewport	логическое значение	верно	Когда он включен, он будет управлять ползунками, которые в данный момент находятся в окне просмотра
Отображение страницы	логическое значение	верно	Когда он включен, он позволяет осуществлять навигацию по клавиатуре с помощью клавиш Page Up и Page Down

Методы управления клавиатурой

Свойства
swiper.включен	логическое значение	Включено ли управление с клавиатуры
Методы
swiper.отключить()		Отключить управление с клавиатуры
swiper.enable()		Включить управление с клавиатуры

События клавиатуры

Имя	Аргументы	Описание
Нажатие клавиши	(swiper, ключевой код)	Событие будет запущено при нажатии клавиши

Управление колесиком мыши

↑

↓

Параметры управления колесиком мыши

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Установите значение`true`, чтобы включить управление колесом мыши
eventsTarget	Любой	"контейнер"	Строка с CSS-селектором или HTML-элементом контейнера, принимающего события колесика мыши. По умолчанию это swiper
Силовая ось	логическое значение	ложь	Установите значение`true`для принудительного прокручивания колесика мыши по оси. Таким образом, в горизонтальном режиме колесико мыши будет работать только при горизонтальной прокрутке, а в вертикальном режиме — только при вертикальной прокрутке.
инвертировать	логическое значение	ложь	Установите значение`true`для инвертирования направления скольжения
Класс noMousewheelClass	строка	"swiper-без колеса мыши"	Прокрутка элементов с этим классом будет игнорироваться
Возможности выпуска	логическое значение	ложь	Установите значение`true`и swiper будет отключать событие прокрутки колесом мыши и позволять прокручивать страницу, когда swiper находится на краю (в начале или в конце)
чувствительность	номер	1	Множитель данных о колесе мыши, позволяет настроить чувствительность колесика мыши
thresholdDelta	нулевой\|номер	null	Минимальная дельта прокрутки колесика мыши для запуска смены слайда swiper
Время удержания порога	нулевой\|номер	null	Минимальная разница во времени прокрутки колесика мыши (в мс) для запуска смены слайдов в свипере

Методы управления колесиком мыши

Свойства
swiper.включен	логическое значение	Включено ли управление колесиком мыши
Методы
swiper.отключить()		Отключить управление колесиком мыши
swiper.enable()		Включить управление колесиком мыши

События Колеса мыши

Имя	Аргументы	Описание
прокрутка	(swiper, событие)	Событие будет запущено при прокрутке колеса мыши

Виртуальные слайды

Модуль «Виртуальные слайды» позволяет хранить в DOM только необходимое количество слайдов. Это очень полезно с точки зрения производительности и проблем с памятью, если у вас много слайдов, особенно слайдов с тяжёлым деревом DOM или изображениями.

Обратите внимание, что в соответствии с реализацией Virtual Slides онне работаетс модулем Grid иslidesPerView: 'auto'

Параметры виртуальных слайдов

Имя	Тип	По умолчанию	Описание
addSlidesAfter	номер	0	Увеличивает количество предварительно отрисованных слайдов после активного слайда
addSlidesBefore	номер	0	Увеличивает количество предварительно отрисованных слайдов перед активным слайдом
Кэш	логическое значение	верно	Включает кэш DOM для рендеринга HTML-элементов слайдов. После рендеринга они будут сохранены в кэше и использованы повторно.
включен	логическое значение	ложь	Включены ли виртуальные слайды
Внешний рендеринг	функция (данные)		Функция для внешнего рендеринга (например, с использованием другой библиотеки для обработки манипуляций с DOM и состояния, такой как React.js или Vue.js). В качестве аргумента она принимает`data`объект со следующими свойствами: `offset`- смещение влево / вверх в пикселях `from`- индекс первого слайда, необходимого для рендеринга `to`- индекс последнего слайда, необходимого для рендеринга `slides`- массив с элементами слайдов для рендеринга
renderExternalUpdate	логическое значение	верно	Если он включен (по умолчанию), то обновит макет Swiper сразу после вызова renderExternal. Полезно отключать и обновлять Swiper вручную при использовании с библиотеками рендеринга, которые выполняют рендеринг асинхронно
renderSlide	функция (слайд,указатель)		Функция для отображения слайда. В качестве аргумента она принимает текущий элемент слайда для`slides`массива и номер индекса текущего слайда. Функция должна возвращать внешний HTML-код слайда или HTML-элемент слайда.
слайды	T[]	[]	Массив со слайдами

Методы виртуальных слайдов

Свойства
swiper.cache	объект	Объект с кэшированными элементами slides HTML
swiper.from	номер	Индекс первого отрисованного слайда
swiper.слайды	T[]	Массив с элементами слайда, передаваемыми параметром`virtual.slides`
swiper.to	номер	Индекс последнего отрисованного слайда
Методы
swiper.appendSlide(слайд)		Добавить слайд.`slides`Это может быть один слайд или массив таких слайдов. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.добавитьslide(слайд)		Предварительный слайд.`slides`может быть отдельным слайдом или массивом таких слайдов. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeAllSlides()		Удалить все слайды Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.removeSlide(индексы скольжения)		Удалите конкретный слайд или слайды.`slideIndexes`Это может быть число с индексом слайда для удаления или массив с индексами. Только для версии Core (в React и Vue это нужно делать путём изменения массива/данных/источника слайдов)
swiper.обновить(принудительно)		Обновить состояние виртуальных слайдов

Виртуальные слайды Dom

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

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    ...
    <div class="swiper-slide">Slide 100</div>
  </div>
</div>
<script>
  const swiper = new Swiper('.swiper', {
    virtual: {
      enabled: true,
    },
  });
</script>

https://myweb.site/

https://myweb.site/#слайд-2

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

Чтобы это работало, вам нужно включить его, передав параметрhashNavigation:trueи добавив хэши слайдов в атрибутdata-hash:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-hash="slide1">Slide 1</div>
    <div class="swiper-slide" data-hash="slide2">Slide 2</div>
    <div class="swiper-slide" data-hash="slide3">Slide 3</div>
    <div class="swiper-slide" data-hash="slide4">Slide 4</div>
    <div class="swiper-slide" data-hash="slide5">Slide 5</div>
    ...
  </div>
</div>

const swiper = new Swiper('.swiper', {
  //enable hash navigation
  hashNavigation: true,
});

Имя	Тип	По умолчанию	Описание
getSlideIndex	функция (swiper,хэш)		Предназначен для использования с виртуальными слайдами, когда невозможно найти слайд в DOM по хешу (например, он ещё не отобразился)
replaceState	логическое значение	ложь	Работает в дополнение к hashnav, заменяя текущий URL-адрес новым вместо добавления его в историю
Состояние наблюдения	логическое значение	ложь	Задайте значение`true`для включения навигации по слайдам (при включенном hashnav) с помощью истории браузера или путем непосредственного указания хэша в адресе документа

Имя	Аргументы	Описание
Хэш-обмен	(swiper)	Событие будет запущено при изменении хэша окна
Набор хэшей	(swiper)	Событие будет запущено, когда swiper обновит хэш

https://myweb.site/

https://myweb.site/слайд-2/

Имя	Тип	По умолчанию	Описание
включен	логическое значение	ложь	Включает плагин History.
keepQuery	логическое значение	ложь	Сохраняйте параметры запроса при изменении URL браузера.
Клавиша	строка	"слайды"	URL-ключ для слайдов
replaceState	логическое значение	ложь	Работает в дополнение к hashnav или истории, заменяя текущий URL-адрес новым вместо добавления его в историю
root	строка	''	Корневая страница Swiper, полезная для указания, когда вы используете режим истории Swiper не на главной странице сайта. Например, это может быть`https://my-website.com/`или`https://my-website.com/subpage/`или`/subpage/`

Контроллер

Параметры контроллера

Имя	Тип	По умолчанию	Описание
Автор:	«слайд»\|«контейнер»	"слайд"	Определяет способ управления другим слайдером: слайд за слайдом (относительно сетки другого слайдера) или в зависимости от всех слайдов/контейнера (в зависимости от общего процента слайдера).
управление	Любой		Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper. Также принимает строку с CSS-селектором элемента Swiper или HTMLElement элемента Swiper
обратный	логическое значение	ложь	Установите значение`true`, и управление будет осуществляться в обратном направлении

Методы контроллера

Свойства
swiper.control	Любой	Передайте сюда другой экземпляр Swiper или массив с экземплярами Swiper, которыми должен управлять этот Swiper

Параметры доступности

Имя	Тип	По умолчанию	Описание
Контейнерное сообщение	нулевая\|строка	null	Сообщение для программ чтения с экрана для внешнего контейнера swiper
Контейнерная роль	нулевая\|строка	null	Значение атрибута «роль», которое необходимо задать для контейнера свипера
containerRoleDescriptionMessage	нулевая\|строка	null	Сообщение для программ чтения с экрана, описывающее роль внешнего контейнера swiper
включен	логическое значение	верно	Включает A11y
firstSlideMessage	строка	"Это первый слайд"	Сообщение для программ чтения с экрана для предыдущей кнопки, когда swiper находится на первом слайде
ID	null\|строка\|число	null	Значение атрибута`id`должно быть задано для swiper-wrapper. Если`null`будет сгенерировано автоматически
itemRoleDescriptionMessage	нулевая\|строка	null	Сообщение для программ чтения с экрана, описывающее роль элемента slide
lastSlideMessage	строка	"Это последний слайд"	Сообщение для программ чтения с экрана для кнопки "Далее", когда swiper находится на последнем слайде
nextSlideMessage	строка	"Следующий слайд"	Сообщение для программ чтения с экрана для кнопки "Далее"
Класс уведомлений	строка	"swiper-уведомление"	Имя CSS-класса уведомления A11y
paginationBulletMessage	строка	«Перейти к слайду{{index}}»	Сообщение для программ чтения с экрана для маркера с одной страницей
prevSlideMessage	строка	"Предыдущий слайд"	Сообщение для программ чтения с экрана для предыдущей кнопки
scrollOnFocus	логическое значение	верно	Позволяет прокручивать слайд, на котором был сделан фокус
slideLabelMessage	строка	'{{index}}/{{slidesLength}}'	Сообщение для программ чтения с экрана с описанием метки элемента слайда
slideRole	строка	"группа"	Значение атрибута swiper slide`role`

Пользовательская сборка

У вас есть два варианта создания пользовательской версии Swiper.

Использование модулей JS

Если вы используете в своём проекте сборщик с поддержкой модулей JS, вы можете импортировать только те модули, которые вам нужны:

// Import Swiper and modules
import Swiper from 'swiper';
import { Navigation, Pagination, Scrollbar } from 'swiper/modules';

// Now you can use Swiper
const swiper = new Swiper('.swiper', {
  // Install modules
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Экспортируются следующие модули:

Virtual- Модуль виртуальных слайдов
Keyboard- Модуль управления клавиатурой
Mousewheel- Модуль управления колесиком мыши
Navigation- Навигационный модуль
Pagination- Модуль разбиения на страницы
Scrollbar- Модуль полосы прокрутки
Parallax- Модуль Параллакса
FreeMode- Модуль Свободного режима
Grid- Модуль сетки
Manipulation- Модуль управления слайдами (только для базовой версии)
Zoom- Модуль масштабирования
Controller- Модуль контроллера
A11y- Модуль специальных возможностей
History- Модуль навигации по истории
HashNavigation- Модуль навигации по хэшу
Autoplay- Модуль автозапуска
EffectFade- Модуль эффекта затухания
EffectCube- Модуль эффекта куба
EffectFlip- Модуль эффекта переворота
EffectCoverflow- Модуль эффекта Coverflow
EffectCards- Модуль эффектов карт
EffectCreative- Модуль создания креативных эффектов
Thumbs- Модуль Thumbs

Использование скрипта сборки

Swiper поставляется с конструктором gulp, который позволяет создавать пользовательские версии библиотек, включающие только необходимые модули. Нам нужно следующее:

Загрузите и распакуйтерепозиторий Swiper GitHubв локальную папку
Установить Node.js (если не установлен)
Теперь нам нужно установить необходимые зависимости. Перейдите в папку с загруженным и распакованным репозиторием Swiper и выполните в терминале:
```
$ npm install
```

Открытьscripts/build-config.jsфайл:

module.exports = {
  // remove modules you don't need
  modules: [
    'virtual',
    'keyboard',
    'mousewheel',
    'navigation',
    'pagination',
    'scrollbar',
    'parallax',
    'zoom',
    'controller',
    'a11y',
    'history',
    'hash-navigation',
    'autoplay',
    'thumbs',
    'free-mode',
    'grid',
    'manipulation',
    'effect-fade',
    'effect-cube',
    'effect-flip',
    'effect-coverflow',
    'effect-creative',
    'effect-cards',
  ],
};

Теперь мы готовы создать пользовательскую версию Swiper:
```
$ npm run build:prod
```
Вот и всё. Сгенерированные файлы CSS и JS и их сжатые версии будут доступны в папкеdist/

Определения TypeScript

Swiper полностью типизирован, он экспортируетSwiperиSwiperOptionsтипы:

// main.ts
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';

const swiperParams: SwiperOptions = {
  slidesPerView: 3,
  spaceBetween: 50,
};

const swiper = new Swiper('.swiper', swiperParams);

Вы также можете просмотреть автоматически сгенерированныеопределения TypeScriptдля всех типов, параметров, свойств и методов.

CSS, CSS3, grid, title, Слайдер, CSS Анимация, Javascript, HTTPS, Анимация, html

WOW.js - Анимация при прокрутке страницы

WOW.js - это самостоятельная JS библиотека для анимации элементов по мере прокрутки страницы. Самостоятельная - значит она не требует jQuery как 99% современных библиотек. WOW.js позволяет анимировать показ элементов при скролле, однако для создания параллакса при скролле лучше использовать другую библиотеку.

Преимущества библиотеки:

Независимость от других JS библиотек;

Маленький размер - 3Кб в минифицированном виде и 1.5 Кб в gzip;

Очень проста в установке и настройке. Вам вообще ничего не надо по сути настраивать;

Библиотека сама по себе очень "легкая" и не создает видимой нагрузки на браузер. Пользователи будут вам благодарны;

Недостатки:

Зависимость от animate.css, хотя вы можете от нее отказаться и написать свои анимации с блекджеком и кейфреймами;

Анимация не откатывается при обратной прокрутке;

Подключение и инициализация

Для начала подключим необходимые файлы стилей и сам скрипт:

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>

Далее к нужному элементу необходимо добавить класс wow и класс для CSS анимации, например так:

<div class="wow bounceInUp">Здесь уже ваш контент, картинки и прочее</div>

Дополнительная настройка HTML элементов

У каждого элемента можно указывать несколько специальных аттрибутов для более тонкой настройки анимации:

data-wow-duration: Изменение длительности анимации;
data-wow-delay: Задержка перед стартом анимации;
data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
data-wow-iteration: Сколько раз повторять анимацию?

Например так:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>

Дополнительные настройки при инициализации

При инициализации объекта можно передать объект с параметрами:

boxClass: Класс для wow-объектов;

animateClass: Класс для срабатывания CSS анимации ('animated' для animate.css);

offset: То же самое, что и data-wow-offset, только в глобальном масштабе;

И, конечно, пример:

wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0
});
WOW.init();

ДЕМО

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WOW</title>
  <link rel="stylesheet" href="css/libs/animate.css">
  <link rel="stylesheet" href="css/site.css">
  <style>
    .wow:first-child {
      visibility: hidden;
    }
  </style>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <div id="container">
    <header>
      <h1>WOW.js</h1>
    </header>
    <div id="main">
      <section class="wow fadeInDown" style="background-color: #f1c40f;"></section>
      <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
      <section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
      <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
      <button id="moar">LOAD MOAR!!</button>
    </div>
  </div>
  <script src="dist/wow.js"></script>
  <script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
  </script>
</body>
</html>

JavaScript / jQuery

/*! WOW - v1.1.3 - 2016-05-06

* Copyright (c) 2016 Matthieu Aussaguel;*/(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a,b){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),null!=a.scrollContainer&&(this.config.scrollContainer=document.querySelector(a.scrollContainer)),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(b){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);

Стили CSS

ANIMATE.MIN.CSS

@charset "UTF-8";

/*!

* animate.css -http://daneden.me/animate

* Version - 3.5.1

* Licensed under the MIT license - http://opensource.org/licenses/MIT

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}

Анимация, CSS Анимация

АНИМАЦИЯ AOS

Установка

Базовые модели

Добавление стилей в <head>:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Добавьте скрипт прямо перед закрытием </body>тега и инициализируйте AOS:

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>

Использование менеджеров пакетов

Установить aosпакет:

yarn add aos@next
или
npm install --save aos@next

Импортируйте сценарий, стили и инициализируйте AOS:

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

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

Как ее использовать?

1. Инициализируйте AOS:

отключить // Глобальные настройки:{(init.

AOS.init();
// ниже перечислены настройки по умолчанию
// Вы также можете передать необязательный объект настроек;)(инициализация
AOS.init({
disable: false, // принимает следующие значения: 'телефон', 'планшет', 'мобильный', логическое значение, выражение или функция
startEvent: 'DOMContentLoaded', // имя события, отправленного в документе, которое AOS должен инициализировать в
initClassName: 'aos-init', // классприменяется после инициализации
animatedClassName: 'aos-animate', // класс, применяемый к анимации
useClassNames: false, // если true, добавит содержимое `data-aos` в качестве классов в scroll
disableMutationObserver: false, // отключает автоматическое обнаружение мутаций (дополнительно)
debounceDelay: 50, // задержка при отмене, используемая при изменении размера окна (дополнительно)
throttleDelay: 99, // задержка при дросселировании, используемая при прокрутке страницы (дополнительно)

// Настройки, которые можно переопределить для каждого элемента, с помощью `атрибуты data-aos-*`:
offset: 120, // смещение (в пикселях) от исходной точки
delay: 0, // значения от 0 до 3000, с шагом 50 мс
duration: 400, // значения от 0 до 3000, с шагом 50 мс
easing: 'ease', // ослабление анимации AOS по умолчанию
once: false, // должна ли анимация выполняться только один раз - при прокрутке вниз
mirror: false, // должны ли элементы анимироваться при прокрутке мимо них
anchorPlacement: 'top-bottom', // определяет, какое положение элемента относительно окна должно вызывать анимацию
});

2. Установите анимацию с помощью data-aos атрибута:

<div data-aos="fade-in"></div>

И настройка поведения с помощью data-aos-*атрибутов:

<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>

Привязка

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

data-aos-anchor- элемент, смещение которого будет использоваться для запуска анимации вместо фактического.

Примеры:

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

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

API

Объект AOS отображается как глобальная переменная, на данный момент доступно три метода:

init- инициализировать AOS
refresh- пересчитать все смещения и положения элементов (вызывается при изменении размера окна)
refreshHard- повторно инициализировать массив с элементами AOS и триггером refresh(вызывается при изменениях DOM, связанных с aosэлементами)

Пример выполнения:

AOS.refresh();

По умолчанию AOS следит за изменениями DOM, и если какие-либо новые элементы загружаются асинхронно или когда что-то удаляется из DOM, оно вызывается refreshHardавтоматически. В браузерах, которые не поддерживаютMutationObserver, например, IE, вам может потребоваться AOS.refreshHard()вызвать самостоятельно.

refreshметод вызывается при изменении размера окна и т. Д., Поскольку он не требует создания нового хранилища с элементами AOS и должен быть как можно более легким.

События JS

AOS отправляет два события в документе: aos:inи aos:outвсякий раз, когда какой-либо элемент анимируется при входе или выходе, чтобы вы могли делать дополнительные вещи в JS:

document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
document.addEventListener('aos:out', ({ detail }) => {
console.log('animated out', detail);
});

Вы также можете указать AOS запускать пользовательское событие для определенного элемента, установив data-aos-idатрибут:

<div data-aos="fade-in" data-aos-id="super-duper"></div>

Затем вы сможете прослушать два пользовательских события:

aos:in:super-duper
aos:out:super-duper

Рецепты:

Добавление пользовательских анимаций:

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

[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
transform: translateX(100px);
&.aos-animate {
transform: translateX(0);
}
}
}

Затем используйте ее в HTML:

<div data-aos="new-animation"></div>

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

Добавление пользовательского упрощения:

Подобно анимации, вы можете добавлять пользовательские упрощения:

[data-aos] {
body[data-aos-easing="new-easing"] &,
&[data-aos][data-aos-easing="new-easing"] {
transition-timing-function: cubic-bezier(.250, .250, .750, .750);
}
}

Настройка расстояния анимации по умолчанию

Расстояние по умолчанию для встроенной анимации составляет 100 пикселей. Пока вы используете SCSS, вы можете переопределить его:

$aos-distance: 200px; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss';

Однако вам необходимо настроить процесс сборки, чтобы он мог импортировать стили node_modulesзаранее.

Интеграция внешней библиотеки анимации CSS (например, Animate.css):

Используется animatedClassNameдля изменения поведения AOS по умолчанию, для применения имен классов, размещенных внутри data-aosпрокрутки.

<div data-aos="fadeInUp"></div>

AOS.init({
useClassNames: true,
initClassName: false,
animatedClassName: 'animated',
});

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

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

[data-aos] {
visibility: hidden;
}
[data-aos].animated {
visibility: visible;
}

Предостережения:

настройка:duration, delay

Длительность и задержка принимают значения от 50 до 3000 с шагом 50 мс, это потому, что они обрабатываются css, и чтобы не делать css длиннее, чем он уже есть, я реализовал только подмножество. Я считаю, что они должны охватывать большинство случаев.

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

body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
transition-duration: 4000ms;
}

Этот код добавит длительность 4000 мс, доступную для установки в элементах AOS, или для установки в качестве глобальной продолжительности при инициализации сценария AOS. Обратите внимание, что double [data-aos][data-aos]- это не ошибка, это уловка, чтобы сделать индивидуальные настройки более важными, чем глобальные, без необходимости писать там уродливое "!важно" :)

Пример использования:

<div data-aos="fade-in" data-aos-duration="4000"></div>

Предопределенные параметры

Анимация

Fade animations:

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip animations:

flip-up
flip-down
flip-left
flip-right

Slide animations:

slide-up
slide-down
slide-left
slide-right

Zoom animations:

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Anchor placements:

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Easing functions:

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

JavaScript / jQuery

* aos.js

Стили CSS

* aos.css

[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}

CSS Анимация

Правило @view-transition в CSS3

Правило @view-transition в CSS3 — это инструмент для создания плавных анимаций при переходе между разными HTML-страницами (в многостраничных приложениях, MPA). Оно работает в связке с View Transitions API — встроенным браузерным механизмом, который делает снимки DOM «до» и «после» обновления и анимирует переход между ними.

Как это работает

При навигации браузер фиксирует текущее состояние страницы, выполняет обновление DOM, затем фиксирует новое состояние и запускает CSS-анимацию, интерполируя между ними.
Ключевое условие для кросс-документных переходов: обе страницы (исходная и целевая) должны находиться на одном origin (совпадать по протоколу, домену и порту). Иначе переход не сработает.
Базовый синтаксис:

@view-transition {
  navigation: auto;
}

navigation: auto;
 — разрешает переход при навигации. Браузер по умолчанию применяет кроссфейд (затухание) между старой и новой страницей.
navigation: none;
 — отключает плавные переходы (значение по умолчанию).

Важный нюанс: чтобы переход сработал, правило @view-transition
нужно добавить на обе страницы. Если правило есть только на одной, переход не произойдёт.

Кастомизация анимации

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

::view-transition-old(root)
 — стили для элементов старой страницы (состояние «до» обновления).
::view-transition-new(root)
 — стили для элементов новой страницы (состояние «после» обновления).

Пример:

/* Анимация, когда старая страница уходит */
::view-transition-old(root) {
  animation: slideOut 0.3s ease-in-out both;
}

/* Анимация, когда появляется новая страница */
::view-transition-new(root) {
  animation: slideIn 0.3s ease-in-out both;
}

/* Определение самих анимаций */
@keyframes slideOut {
  to { transform: translateX(-100%); }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
}

Ещё один приём: можно дать общее имя перехода элементам, которые должны плавно перемещаться между страницами (например, общему изображению в карточке товара и на детальной странице). Для этого используется свойство view-transition-name

Поддержка браузерами

Правило @view-transition относится к CSS View Transitions Module Level 2, который поддерживает:

Chrome 126+
Edge 126+
Safari 18.2+

В Firefox поддержка Level 2 пока в разработке.
Важное замечание: если браузер не поддерживает эту функцию, сайт продолжит работать в обычном режиме — @view-transition работает как прогрессивное улучшение.

Дополнительные возможности

Ограниченные переходы (Scoped Transitions). В Chrome 148+ появилась возможность ограничивать переход конкретным поддеревом DOM, а не всей страницей.
Учёт prefers-reduced-motion. Для доступности можно ограничить анимации для пользователей, которые предпочитают их отключать:

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

Вывод

@view-transition — мощный инструмент для создания плавных и выразительных переходов между страницами без необходимости писать много JavaScript. Главное — не забыть добавить это правило на обе стороны навигации и продумать анимации для общих элементов.

Стили CSS . Полностью рабочий пример

@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: pixelate-dissolve;
}
}

html:active-view-transition-type(pixelate-dissolve)::view-transition-old(root) {
animation: pixelate-out 1.4s ease forwards;
}

html:active-view-transition-type(pixelate-dissolve)::view-transition-new(root) {
animation: pixelate-in 1.4s ease forwards;
}

@keyframes pixelate-out {
0% {
filter: blur(0px);
opacity: 1;
}
100% {
filter: blur(40px);
opacity: 0;
}
}

@keyframes pixelate-in {
0% {
filter: blur(40px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
}
}

CSS, CSS Анимация

Записи с меткой "CSS Анимация"

@-webkit-keyframes

Swiper API

WOW.js - Анимация при прокрутке страницы

АНИМАЦИЯ AOS

Правило @view-transition в CSS3

Синтаксис

Пример кода

Полный HTML-макет Swiper

Стили

Стили CSS

Меньше стилей

Стили SCSS

Инициализировать Swiper

Параметры

Методы и свойства

Мероприятия

Модули

Навигация

Параметры навигации

Методы навигации

Навигационные события

Пользовательские свойства CSS Навигации

Разбивка на страницы

Параметры разбивки на страницы

Методы разбивки на страницы

События разбивки на страницы

Пользовательские свойства CSS Разбиения на страницы

Полоса прокрутки

Параметры полосы прокрутки

Методы полосы прокрутки

События полосы прокрутки

Пользовательские свойства CSS полосы прокрутки

Автоматическое воспроизведение

Параметры автозапуска

Методы автозапуска

Автоматическое воспроизведение событий

Бесплатный режим

Параметры свободного режима

Сетка

Параметры сетки

Манипуляции

Методы манипулирования

Параллакс

Параметры Параллакса

Отложенная загрузка

Эффект затухания

Параметры эффекта затухания

Эффект Coverflow

Параметры эффекта Coverflow

Эффект переворота

Параметры эффекта переворота

Эффект куба

Параметры эффекта куба

Эффект карт

Параметры эффекта карт

Творческий эффект

Параметры креативного эффекта

Большие пальцы

Параметры Thumbs

Методы Thumbs

Масштабирование

Параметры масштабирования

Методы масштабирования

Масштабирование событий

Управление с клавиатуры

Параметры управления клавиатурой

Методы управления клавиатурой

События клавиатуры

Управление колесиком мыши

Параметры управления колесиком мыши

Методы управления колесиком мыши

События Колеса мыши

Виртуальные слайды

Параметры виртуальных слайдов

Методы виртуальных слайдов

Виртуальные слайды Dom

Навигация по хэшу

Параметры хэш-навигации

Хэширование событий Навигации