Kipengele cha animation-fill-mode

Kipengele animation-fill-mode kinaweka animasyon itakavyo koma baada ya kumalizika. Kwa chaguo-msingi animasyon hurudi kwenye thamani ya awali na hii inaweza kuonekana sio nzuri sana.

Syntax

Thamani

Thamani	Maelezo
none	Ikiwa kuna ucheleweshaji wa animasyon - basi katika muda wa ucheleweshaji kipengele kitabaki mahali pake, kisha kuruka kwenye sura ya 0%. Baada ya animasyon kumalizika, kipengele hakibaki katika hali ile, ilipokoma, bali huruka kurudi kwenye hali ya awali.
backwards	Kulazimisha kipengele kijiunge baada ya kupakia ukurasa kwenye sura ya 0%, hata kama kuna ucheleweshaji animation-delay, na kubaki huko, hadi animasyon ianze. Baada ya animasyon kumalizika, kipengele hakibaki katika hali ile, ilipokoma, bali huruka kurudi kwenye hali ya awali.
forwards	Kumwambia kivinjari kuwa baada ya animasyon kumalizika kipengele kibaki katika hali ile, ilipokoma.
both	Inajumuisha backwards na forwards - baada ya kupakia ukurasa kipengele kitajiweka kwenye sura ya 0%, na baada ya animasyon kumalizika kipengele kitabaki pale, ilipokoma.

Thamani ya chaguo-msingi: none.

Mfano . Thamani none

Katika mfano huu margin-left imewekwa kuwa thamani 300px kwa kipengele, na kwa sura ya kwanza ya animasyon - kuwa 0px. Kwa kuwa hakuna ucheleweshaji animation-delay, basi kipengele baada ya kupakia ukurasa kitakuwa katika 0px, na si 300px. Zaidi ya hayo, animasyon baada ya kumalizika itaruka kwenye thamani ya awali:

:

Mfano . Thamani none

Katika mfano huu margin-left imewekwa kuwa thamani 300px kwa kipengele, na kwa sura ya kwanza ya animasyon - kuwa 0px. Pia kwa kipengele kuna ucheleweshaji animation-delay wa 3 sekunde, kwa hiyo kipengele baada ya kupakia ukurasa kitakuwa katika 300px, na si 0px, na kitabaki huko 3 sekunde kisha kuruka kwenye 0px - na animasyon itaanza kutoka huko. Zaidi ya hayo, animasyon baada ya kumalizika itaruka kwenye thamani ya awali:

:

Mfano . Thamani backwards

Katika mfano huu margin-left imewekwa kuwa thamani 300px kwa kipengele, na kwa sura ya kwanza ya animasyon - kuwa 0px. Pia kwa kipengele kuna animation-fill-mode katika thamani backwards, kwa hiyo kipengele baada ya kupakia ukurasa kitakuwa katika 0px, na si 300px, kama ilivyokuwa kwa animation-fill-mode katika thamani none. Zaidi ya hayo, animasyon baada ya kumalizika itaruka kwenye thamani ya awali:

:

Mfano . Thamani none na idadi ya kurudiwa ni 1

Katika mfano huu margin-left imewekwa kuwa thamani 300px kwa kipengele, na kwa sura ya kwanza ya animasyon - kuwa 0px. Pia kwa kipengele kuna ucheleweshaji animation-delay wa 3 sekunde, kwa hiyo kipengele baada ya kupakia ukurasa kitakuwa katika 300px, na si 0px, na kitabaki huko 3 sekunde kisha kuruka kwenye 0px - na animasyon itaanza kutoka huko. Kwa kuwa animation-fill-mode imewekwa katika thamani none, basi baada ya kucheza animasyon kipengele kirudi kwenye thamani ya awali:

:

Mfano . Thamani forwards na idadi ya kurudiwa ni 1

Katika mfano huu animation-fill-mode imewekwa katika thamani forwards, na idadi ya kurudiwa kwa animasyon - kuwa 1. Baada ya kucheza animasyon kipengele kitabaki katika msimamo ule, ulipomalizika animasyon, wala huruka kwenye hatua ya asili.

Zaidi ya hayo, margin-left imewekwa kuwa thamani 300px kwa kipengele, na kwa sura ya kwanza ya animasyon - kuwa 0px. Pia kwa kipengele kuna ucheleweshaji animation-delay wa 3 sekunde, kwa hiyo kipengele baada ya kupakia ukurasa kitakuwa katika 300px, na si 0px, na kitabaki huko 3 sekunde kisha kuruka kwenye 0px - na animasyon itaanza kutoka huko:

:

Mfano . Thamani both na idadi ya kurudiwa ni 1

Katika mfano huu animation-fill-mode imewekwa katika thamani both, na idadi ya kurudiwa kwa animasyon - kuwa 1. Baada ya kupakia ukurasa kipengele kitasimama katika sura ya kwanza ya animasyon (katika 0px, na si katika 300px), na baada ya kucheza animasyon kipengele kitabaki katika msimamo ule, ulipomalizika animasyon, wala huruka kwenye hatua ya asili:

:

Angalia pia