Css infinite: animation — CSS | MDN

04.07.2023 alexxlab

Содержание

animation-fill-mode — CSS | MDN

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

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

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

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Несколько значений могут быть заданы через запятую.   */
/* Каждое значение соответствует для анимации в animation-name. */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none
- : Стили анимации не будут применены к элементу до и после её выполнения.

forwards

: По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями `animation-direction` и `animation-iteration-count`:	`animation-direction`	`animation-iteration-count`
`normal`	любое	`100%` или `to`
`reverse`	любое	`0%` или `from`
`alternate`	чётное	`0%` или `from`
`alternate`	нечётное	`100%` или `to`
`alternate-reverse`	чётное	`100%` или `to`
`alternate-reverse`	нечётное	`0%` или `from`

backwards

: Элемент сохранит стиль первого ключевого кадра (en-US) на протяжении периода `animation-delay`. Первый ключевой кадр определяется значением `animation-direction`:	`animation-direction`	первый ключевой кадр
`normal` или `alternate`	`0%` или `from`
`reverse` или `alternate-reverse`	`100%` или `to`

both
- : Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

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

animation-fill-mode = 
<single-animation-fill-mode># (en-US)  "><single-animation-fill-mode> = 
none       | (en-US)
forwards   | (en-US)
backwards  | (en-US)
both

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div>
  <div>Этот просто растёт</div>
  <div>Этот растёт и остаётся большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

Specification
CSS Animations Level 1 # animation-fill-mode

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

Found a content problem with this page?

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

Want to get more involved?

Learn how to contribute.

This page was last modified on 10 окт. 2022 г. by MDN contributors.

animation-direction — CSS | MDN

Экспериментальная возможность:

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

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;

Значения

normal

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

reverse

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

положение и снова проигрывается.

alternate

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

alternate-reverse

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

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

animation-direction = 
<single-animation-direction># (en-US)  "><single-animation-direction> = 
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 with JavaScript enabled. Enable JavaScript to view data.

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

Found a content problem with this page?

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

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Анимация CSS Свойство

❮ Назад Полное руководство по CSS Далее ❯

Пример

Привязка анимации к элементу

с использованием сокращенного свойства:

div {
анимация: mymove 5s бесконечно;
}

Попробуйте сами »

Определение и использование

Свойство animation является сокращенным свойством для:

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

состояние воспроизведения анимации

Примечание: Всегда указывайте свойство animation-duration, иначе продолжительность равна 0 и никогда не будет воспроизводиться.

Показать демо ❯

Значение по умолчанию:	нет 0 легкий 0 1 обычный нет работает
Унаследовано:	нет
Анимация:	№. Читать про анимированный
Версия:	CSS3
Синтаксис JavaScript:	объект .style.animation=»mymove 5s бесконечно» Попробуй

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

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

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Собственность
анимация	43.0 4. 0 -вебкит-	10,0	16,0 5,0 -мунц-	9.0 4.0 -вебкит-	30,0 15,0 -webkit- 12,0 -o-

Синтаксис CSS

анимация: имя продолжительность функция времени задержка количество итераций направление воспроизведения в режиме заполнения ;

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

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

Связанные страницы

Учебник по CSS: CSS-анимация

Ссылка на HTML DOM: свойство анимации

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 32 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

CSS animation-delay Свойство

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Запустить анимацию через 2 секунды:

div {
animation-delay: 2s;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Задержка анимации 9Свойство 0020 указывает задержку начала анимации.

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

Значение по умолчанию:	0 с
По наследству:	нет
Анимация:	№. Читать про анимированный
Версия:	CSS3
Синтаксис JavaScript:	объект .style.animationDelay="1s" Попробуй

`Поддержка браузера`

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

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Собственность
анимация-задержка	43. 0 4.0 -вебкит-	10,0	16,0 5,0 -мунц-	9.0 4.0 -вебкит-	30,0 15,0 -webkit- 12,0 -o-

`Синтаксис CSS`

animation-delay: time |initial|inherit;

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

Значение	Описание	Демо
время	Дополнительно. Определяет количество секунд (s) или миллисекунд (ms) ожидания перед запуском анимации. Значение по умолчанию — 0. Допускаются отрицательные значения. Если вы используете отрицательные значения, анимация начнется так, как если бы она уже играл в течение N секунд/миллисекунд.	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

`Дополнительные примеры`

`Пример`

Использование отрицательных значений. Здесь анимация начнется так, как если бы она уже воспроизводится в течение 2 секунд:

div { animation-delay: -2s; }

 Попробуйте сами »
 Связанные страницы 
 Учебник по CSS: Анимация CSS
 Ссылка HTML DOM: свойство animationDelay
 ❮ Назад
Полное руководство по CSS
Далее ❯
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебник HTML 
 Учебник CSS 
 Учебник JavaScript 
 How To Tutorial 
 Учебник SQL 
 Учебник Python 
 Учебник W3.CSS 
 Учебник Bootstrap 
 Учебник PHP 
 Учебник Java 
 Учебник C++ 
 Учебник jQuery 
 9000 3
 Основные каталожные номера 
 Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.

Css infinite: animation — CSS | MDN

animation-fill-mode — CSS | MDN

Значения

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

HTML

CSS

Found a content problem with this page?

animation-direction — CSS | MDN

Значения

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

Found a content problem with this page?

Анимация CSS Свойство

Пример

Определение и использование

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

Синтаксис CSS

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

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

CSS animation-delay Свойство

Пример

Определение и использование

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

Синтаксис CSS

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

Дополнительные примеры

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные каталожные номера

Добавить комментарий Отменить ответ

`Поддержка браузера`

`Синтаксис CSS`

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

`Дополнительные примеры`

`Пример`

`Добавить комментарий Отменить ответ`