Что определяет свойство анимации animation direction

Свойство animation-direction

Свойство animation-direction задает направление анимации. По умолчанию анимация повторится только 1 раз и затем вернется в исходное состояние, затем, если задана задержка animation-delay , будет ждать заданное время и потом цикл начнется сначала.

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

Также можно задать такое поведение: анимация дойдет до крайней точки и вернется обратно (как в transition ). Смотрите описание ниже.

Синтаксис

Значения

Значение	Описание
reverse	Анимация будет проигрываться в обратном направлении.
alternate	Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition).
alternate-reverse	Анимация будет проигрываться из конечного положения в начальное и обратно. По сути это значения alternate и reverse в одном флаконе.
normal	Анимация будет проигрываться от начала к концу, а после окончания скачком перескакивать в начальное положение.

Значение по умолчанию: normal .

Пример

Сейчас элемент будет двигаться в одну сторону, а потом возвращаться обратно, так как задано значение alternate . При этом animation-duration имеет значение 3 секунды и это значит, что перемещения «туда» и «обратно» будут длиться по 3 секунды:

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < animation-direction: alternate; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример

Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < animation-direction: reverse; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Пример

Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):

@keyframes move < from < margin-left: 0; >to < margin-left: 400px; >> #elem < animation-direction: alternate-reverse; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; >

Смотрите также

• свойство animation-name ,
  которое задает имя анимации
• свойство animation-duration ,
  которое задает продолжительность анимации
• свойство animation-delay ,
  которое задает задержку перед выполнением анимации
• свойство animation-timing-function ,
  которое задает скорость выполнения анимации
• свойство animation-iteration-count ,
  которое задает количество итераций анимации
• свойство animation-fill-mode ,
  которое задает состояние анимации
• свойство animation-play-state ,
  которое позволяет поставить анимацию на паузу
• свойство animation ,
  представляющее собой сокращение для анимаций
• команду @keyframes ,
  задающую ключевые кадры анимации
• плавные переходы transition , представляющие собой анимацию по наведению на элемент

animation-direction

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

Описание

CSS-свойство animation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.

Также удобно использовать сокращённое свойство animation , чтобы одновременно установить все свойства анимации.

Начальное значение	normal
Применяется к	все элементы, ::before и ::after псевдоэлементы
Наследуется	нет
Обработка значения	как указано
Animation type	Not animatable

Синтаксис

/* Одиночная анимация */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* Несколько анимаций */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* Глобальные значения */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; 

Значения

Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.

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

Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count .

Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count .

Формальный синтаксис

animation-direction =
# (en-US)

=
normal | (en-US)
reverse | (en-US)
alternate | (en-US)
alternate-reverse

Примеры

Смотрите примеры CSS анимаций.

Спецификации

Specification
CSS Animations Level 1 # animation-direction

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

BCD tables only load in the browser

Смотрите также

• Использование CSS-анимации
• AnimationEvent

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Анимация на сайте. Свойство animation

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

Синтаксис

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state; 

Наследование

Свойство не наследуется по умолчанию. Если вы устанавливаете animation для родительского элемента, а дочерний элемент не имеет своего собственного правила animation , то анимация не будет применяться к дочернему элементу.

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

Значения свойства

Значения animation могут быть комбинацией следующих параметров:

animation-name

Определяет название анимации, которое соответствует определенной группе ключевых кадров — @keyframes .

animation-duration

Задаёт продолжительность анимации в секундах или миллисекундах.

animation-timing-function

Определяет временную функцию, которая контролирует скорость и характер изменений во время анимации. Значения:

linear — анимация происходит с постоянной скоростью.

Пример анимации с постоянной скоростью

ease — значение по умолчанию, которое начинается медленно, затем ускоряется и замедляется в конце.

Пример анимации, которая начинается медленно, ускоряется и в конце замедляется

ease-in — начинается медленно и потом ускоряется.

Пример анимации, которая начинается медленно и потом

ease-out — начинается быстро и замедляется к концу.

Пример анимации, которая начинается быстро и замедляется к концу

ease-in-out — начинается медленно, затем ускоряется, а потом замедляется.

Пример анимации, которая начинается медленно, затем ускоряется, а потом замедляется

animation-delay

Задаёт задержку перед началом анимации в секундах или миллисекундах.

Пример анимации с задержкой в 3 секунды

animation-iteration-count

Определяет количество повторений анимации. Значения:

— infinite — анимация повторяется бесконечно. — Числовые значения — указывают конкретное количество повторений.

animation-direction

Определяет направление анимации. Распространенные значения:

normal — проигрывается в прямом направлении.

Пример анимации, которая.проигрывается в прямом направлении

reverse — проигрывается в обратном направлении.

Пример анимации, которая проигрывается в обратном направлении

alternate — проигрывается в прямом и обратном направлениях чередуясь.

Пример анимации, которая проигрывается в прямом и обратном направлениях чередуясь

animation-fill-mode

Определяет стили, применяемые к элементу до и после анимации. Распространенные значения:

none — стили элемента не изменяются до или после анимации.

Пример анимации

forwards — элемент сохраняет стили последнего кадра после окончания анимации.

Пример анимации

backwards — элемент применяет стили первого кадра до начала анимации.

Пример анимации

animation-play-state

Определяет состояние анимации: остановлена или воспроизводится. Значения:

• running — анимация воспроизводится.
• paused — анимация остановлена.

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

Создадим анимацию с именем myAnimation , которая изменяет прозрачность элемента от полностью прозрачного — opacity: 0 , до полностью видимого — opacity: 1 , а затем снова до полностью прозрачного. Анимация будет повторяться бесконечно — infinite и длиться 3 секунды — 3s .

  @keyframes myAnimation < 0% < opacity: 0; >50% < opacity: 1; >100% < opacity: 0; >> .element 
Пример элемента с анимацией
  

@keyframes myAnimation < 0% < opacity: 0; >50% < opacity: 1; >100% < opacity: 0; >> .element

Пример анимации

⭐ Поддержка браузерами свойства animation

Нюансы использования

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

Материалы по теме

• Подборка микроанимаций с CodePen
• 10 библиотек для CSS и JS анимации
• Простая анимация на чистом CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

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

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

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

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

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

• 28 июля 2023

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023

Как верстать и оформлять цитаты

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

• 22 июня 2023

animation-direction

normal Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию. alternate Анимация идёт с начала до конца, затем плавно возвращается в исходное положение. reverse Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию. alternate-reverse
Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.

Песочница

normal alternate reverse alternate-reverse

@keyframes move < from < background: #e4efc7; transform: translateX(0); >to < background: #fee5db; transform: translateX(300px); >> div < animation: move 5s infinite; animation-direction: >; >

Пример

Объектная модель

объект.style.animationDirection

Примечание

Chrome до версии 43, Safari до версии 9 и Android поддерживают свойство -webkit-animation-direction .

Opera до версии 12.10 поддерживает свойство -o-animation-direction .

Firefox до версии 16 поддерживает свойство -moz-animation-direction .

Спецификация

Спецификация	Статус
CSS Animations	Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

normal, alternate	10	12	3	43	12	12.10	4	5	16
reverse, alternate-reverse	10	12	19	43	30		9	16

normal, alternate	2	5	5	16	12	12.10	4
reverse, alternate-reverse	5	16		30		9.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

• @keyframes
• animation
• animation-delay
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• Анимация в CSS
• Переходы и анимация

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom