Animații CSS. Modul de completare pentru o animație. Proprietatea animation-fill-mode. Valori: none, forwards, backwards, both.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.
Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).
Proprietatea animation-fill-mode poate avea următoarele valori:
- none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
- forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
- backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
- both - Animația va respecta regulile atât în față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții
Următorul exemplu permite elementului <div> să păstreze valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației:
Exemplu:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}