Различия

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

--- css:animation [2022/05/15 20:56] – so_v_a
+++ css:animation [2026/08/06 08:56] (текущий) – so_v_a
@@ Строка 1: / Строка 1: @@
+<!DOCTYPE markdown>
 # CSS свойство Animation
 ## Синтаксис
-```
+```CSS
 animation: animation-duration || animation-timing-function ||
   animation-delay || animation-iteration-count || animation-direction ||
@@ Строка 30: / Строка 33: @@
 Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами.
 Синтаксис
-```
+```CSS
 animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear |
      step-start | step-end | steps | cubic-bezier
@@ Строка 42: / Строка 45: @@
  - **step-start** - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
  - **step-end** - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
  - **steps** - Ступенчатая функция, имеющая заданное число шагов.
+Пример для steps:
-```
+```CSS
 animation-timing-function: steps(<число>, start | end)
 ```
  Здесь: **<число>** — целое число больше нуля; **start** — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); **end** — задаёт полунепрерывную сверху функцию.
@@ Строка 58: / Строка 60: @@
 ### animation-iteration-count
 Свойство определяет, **сколько раз проигрывать цикл анимации до её остановки**.
 Синтаксис
 ```
 animation-iteration-count: infinite | <число>
@@ Строка 67: / Строка 71: @@
 ### animation-direction
 Устанавливает **направление движения** анимации.
 Синтаксис
 ```
 animation-direction: normal | alternate | reverse | alternate-reverse
 ```
 Значения
 - **normal** - Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
 - **alternate** - Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
@@ Строка 79: / Строка 88: @@
 ### animation-fill-mode
-Определяет, **какие стили должны применяться к элементу, когда анимация не проигрывается**. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
+Определяет, **какие стили должны применяться к элементу, когда анимация не проигрывается**. Например, после её завершения или при остановке.
+По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
 К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.
  Синтаксис
 ```
 animation-fill-mode: none | forwards | backwards | both
 ```
 - **none** - К элементу не применяются какие-либо стили.
 - **forward**s - К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств [animation-direction](https://webref.ru/css/animation-direction) и [animation-iteration-count](https://webref.ru/css/animation-iteration-count) (табл. 1).
+- **backwards** - К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2).
+ - **both** - К элементу применяются оба правила, как для forwards, так и для backwards.
 Табл. 1. Последний ключевой кадр
-animation-direction | animation-iteration-count | Значение
+| animation-direction | animation-iteration-count | Значение |
------------- | ------------ | ------------
+|:---------------------|:-------|:-------|
-normal | любое число | 100% или to
+| normal | любое число | 100% или to |
-reverse | любое число | 0% или from
+| reverse | любое число | 0% или from |
-alternate | чётное число | 0% или from
+| alternate | чётное число | 0% или from |
-alternate | нечётное число | 100% или to
+| alternate | нечётное число | 100% или to |
-alternate-reverse | чётное число | 100% или to
+| alternate-reverse | чётное число | 100% или to |
-alternate-reverse | нечётное число | 0% или from
+| alternate-reverse | нечётное число | 0% или from |
-- **backwards** - К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2).
 Табл. 2. Первый ключевой кадр
-animation-direction |  Значение
+| animation-direction | Значение |
------------- | ------------
+|:-------|:-------|:-------|
-normal или alternate | 0% или from
+| normal или alternate | 0% или from |
-reverse или alternate-reverse | 100% или to
+| reverse или alternate-reverse | 100% или to |
- - **both** - К элементу применяются оба правила, как для forwards, так и для backwards.
 ### animation-play-state
@@ Строка 129: / Строка 142: @@
 Значения
-- none - Отключает анимацию.
+- **none** - Отключает анимацию.
-- <идентификатор> - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.
+- **<идентификатор>** - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.
 ## @keyframes