Animații CSS. Exemple animation-fill-mode.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Următorul exemplu permite elementului <div> să obțină valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației (în perioada de întârziere a animației (animation-delay)):
Exemplu:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Următorul exemplu permite elementului <div> să obțină valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației și să păstreze valorile stilului de la ultimul cadru de cheie (keyframe) atunci când animația se încheie:Exemplu:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}