Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since март 2020 г..
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Словарь EffectTiming, входящий в состав Web Animations API, используется в Element.animate(), KeyframeEffectReadOnly(), и KeyframeEffect() для описания временных свойств анимационных эффектов. Все эти свойства необязательные, хотя без установки duration анимация не будет воспроизводиться.
Проще говоря, эти свойства описывают как user agent должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.
Число миллисекунд для задержки начала анимации. По умолчанию 0.
direction НеобязательныйУказывает направление анимации. Она может выполняться вперёд (normal), назад (reverse), переключать направление после каждой итерации (alternate), или работать назад и переключать после каждой итерации (alternate-reverse). По умолчанию "normal".
duration НеобязательныйЧисло миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно 0.
easing НеобязательныйСкорость изменения анимации с течением времени. Принимает заранее определённые значения "linear", "ease", "ease-in", "ease-out", и "ease-in-out", или кастомное "cubic-bezier" со значением типа "cubic-bezier(0.42, 0, 0.58, 1)". По умолчанию "linear".
endDelay НеобязательныйЧисло миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию 0.
fill НеобязательныйДиктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением ("backwards"), сохраняться после того, как анимация завершилась ("forwards"), или и то и другое ("both"). По умолчанию "none".
iterationStart НеобязательныйОписывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию 0.0.
iterations НеобязательныйЧисло раз, которое анимация должна повторяться. По умолчанию 1, может принимать значение до Infinity, чтобы повторять анимацию до тех пор, пока элемент существует.
| Web Animations # dom-keyframeeffect-keyframeeffect |
Enable JavaScript to view this browser compatibility table.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.