SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили:
css:animation

Различия

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

Ссылка на это сравнение

Следующая версия		Предыдущая версия
css:animation [2022/05/15 14:52] – создано so_v_acss:animation [2026/08/06 08:56] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 +
 +
 # CSS свойство Animation # CSS свойство Animation
  
 ## Синтаксис ## Синтаксис
-```+```CSS
 animation: animation-duration || animation-timing-function ||  animation: animation-duration || animation-timing-function || 
   animation-delay || animation-iteration-count || animation-direction ||    animation-delay || animation-iteration-count || animation-direction || 
Строка 12: Строка 15:
  
 Значение по умолчанию : Значение по умолчанию :
--   animation-name: none + 
--   [animation-duration] (#animation-duration): 0s +* animation-name: none 
--   animation-timing-function: ease +* [animation-duration] (#animation-duration): 0s 
--   animation-delay: 0s +* animation-timing-function: ease 
--   animation-iteration-count: 1 +* animation-delay: 0s 
--   animation-direction: normal +* animation-iteration-count: 1 
--   animation-fill-mode: none +* animation-direction: normal 
--   animation-play-state: running+* animation-fill-mode: none 
 +* animation-play-state: running 
  
 ### animation-duration ### animation-duration
Строка 28: Строка 33:
 Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами.
 Синтаксис Синтаксис
-```+```CSS
 animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear |  animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | 
      step-start | step-end | steps | cubic-bezier      step-start | step-end | steps | cubic-bezier
 ``` ```
 +
  - **ease** - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).  - **ease** - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
  - **ease-in** -  Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).  - **ease-in** -  Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
Строка 39: Строка 45:
  - **step-start** - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.  - **step-start** - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
  - **step-end** - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.  - **step-end** - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
- - **steps** - Ступенчатая функция, имеющая заданное число шагов.  + - **steps** - Ступенчатая функция, имеющая заданное число шагов.   
- +Пример для steps: 
- `animation-timing-function: steps(<число>, start | end)`+```CSS 
 +animation-timing-function: steps(<число>, start | end) 
 +``` 
 + Здесь: **<число>** — целое число больше нуля; **start** — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); **end** — задаёт полунепрерывную сверху функцию.
  
- Здесь: <число> — целое число больше нуля; start — задаёт [полунепрерывную снизу функцию](http://ru.wikipedia.org/wiki/Полунепрерывная_функция); end — задаёт полунепрерывную сверху функцию. 
  - **cubic-bezier** - Задаёт функцию движения в виде [кривой Безье](http://ru.wikipedia.org/wiki/Кривая_Безье).  - **cubic-bezier** - Задаёт функцию движения в виде [кривой Безье](http://ru.wikipedia.org/wiki/Кривая_Безье).
  
Строка 49: Строка 57:
 Устанавливает **время ожидания перед запуском** цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. Устанавливает **время ожидания перед запуском** цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
 Допустимо указывать несколько значений, перечисляя их через запятую. Допустимо указывать несколько значений, перечисляя их через запятую.
 +
 +### animation-iteration-count
 +Свойство определяет, **сколько раз проигрывать цикл анимации до её остановки**.
 +
 +Синтаксис
 +
 +```
 +animation-iteration-count: infinite | <число>
 +```
 +Значения
 +- **infinite** - Анимация повторяется бесконечно.
 +- **<число>** - Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.
 +
 +### animation-direction
 +
 +Устанавливает **направление движения** анимации.
 +
 +Синтаксис
 +
 +```
 +animation-direction: normal | alternate | reverse | alternate-reverse
 +```
 +
 +Значения
 +
 +- **normal** - Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
 +- **alternate** - Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
 +- **reverse** - Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
 +- **alternate-reverse** - Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.
 +
 +### 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 | Значение |
 +|:---------------------|:-------|:-------|
 +| normal | любое число | 100% или to |
 +| reverse | любое число | 0% или from |
 +| alternate | чётное число | 0% или from |
 +| alternate | нечётное число | 100% или to |
 +| alternate-reverse | чётное число | 100% или to |
 +| alternate-reverse | нечётное число | 0% или from |
 +
 +Табл. 2. Первый ключевой кадр
 +
 +| animation-direction | Значение |
 +|:-------|:-------|:-------|
 +| normal или alternate | 0% или from |
 +| reverse или alternate-reverse | 100% или to |
 +
 +
 +### animation-play-state
 +Свойство определяет, **проигрывать анимацию или поставить её на паузу**. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.
 +
 + Синтаксис
 +
 +```
 +animation-play-state: running | paused
 +```
 +Значения
 +
 +- **running** - Проигрывать анимацию.
 +- **paused** - Поставить анимацию на паузу.
 +
 +### animation-name
 +Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя, связанное с правилом [@keyframes](https://webref.ru/css/keyframes), оно в свою очередь задаёт последовательность движения.
 +
 +Значения
 +
 +- **none** - Отключает анимацию.
 +- **<идентификатор>** - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.
 +
 +## @keyframes
 +
 +Правило **@keyframes** устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому.
 +
 +Синтаксис
 +
 +```
 +@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }
 +```
 +
 +Значения
 +
 +- **<переменная>** - Уникальная переменная, которая связывает @keyframes с [animation](https://webref.ru/css/animation), через это свойство настраивается время анимации и другие её параметры.
 +- **from** - Первый ключевой кадр, аналогичен 0%.
 +- **to** - Последний ключевой кадр, аналогичен 100%.
 +- **<проценты>** - Устанавливает ключевой кадр в процентах от времени всей анимации.
  
/var/www/html/dokuwiki/data/attic/css/animation.1652626355.txt.gz · Последнее изменение: (внешнее изменение)