Анимация
Обновлено: 20.01.2023
Анимация
Свойства, задающие движение элементов на веб-странице или анимационный переход из одного состояния в другое.
-
@keyframes
@keyframes
Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.
-
animation-delay
animation-delay
Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
-
animation-duration
animation-duration
Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.
-
animation-fill-mode
animation-fill-mode
Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
-
animation-iteration-count
animation-iteration-count
Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.
-
animation-name
animation-name
Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя, связанное с правилом @keyframes, оно в свою очередь задаёт последовательность движения.
-
animation-play-state
animation-play-state
Свойство определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.
-
animation-timing-function
animation-timing-function
Встановлює, згідно з якою функцією часу має відбуватися анімація кожного циклу між ключовими кадрами. Вона являє собою математичну функцію, що показує, як швидко за часом змінюється значення властивості. Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, водночас функція за віссю ординат може перевищувати ці значення в більший або менший бік (рис. 1).
-
transition
transition
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.
-
transition-delay
transition-delay
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
-
transition-duration
transition-duration
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.
-
transition-property
transition-property
Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
-
transition-timing-function
transition-timing-function
Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.