EffectTiming
Baseline
Widely available
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 должен вÑполнÑÑÑ Ð¿ÐµÑÐµÑ Ð¾Ð´ Ð¾Ñ ÐºÐ»ÑÑевого кадÑа к клÑÑÐµÐ²Ð¾Ð¼Ñ ÐºÐ°Ð´ÑÑ, и как веÑÑи ÑебÑ, когда анимаÑÐ¸Ñ Ð½Ð°ÑинаеÑÑÑ Ð¸ заканÑиваеÑÑÑ.
СвойÑÑва
delayÐеобÑзаÑелÑнÑй-
ЧиÑло миллиÑекÑнд Ð´Ð»Ñ Ð·Ð°Ð´ÐµÑжки наÑала анимаÑии. Ðо ÑмолÑаниÑ
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, ÑÑÐ¾Ð±Ñ Ð¿Ð¾Ð²ÑоÑÑÑÑ Ð°Ð½Ð¸Ð¼Ð°ÑÐ¸Ñ Ð´Ð¾ ÑÐµÑ Ð¿Ð¾Ñ, пока ÑÐ»ÐµÐ¼ÐµÐ½Ñ ÑÑÑеÑÑвÑеÑ.
СпеÑиÑикаÑии
| Specification |
|---|
| Web Animations > # dom-keyframeeffect-keyframeeffect > |