Na wstępie - jestem początkująca i mam problem z animacją. Animacja to 19 obrazków tworzących idącego kota, który na końcu siada... i tu jest problem. Chcę zrobić tak, żeby kot siedział, gdy animacja się zakończy. Aktualnie jest tak, że po zakończeniu animacji kot znika całkowicie.
Przy opcji animation-fill-mode: forewards -> po zakończeniu animacji pojawia się obrazek pierwszy (a żeby było tak jak chcę powinien pojawić się ostatni). Z góry dziękuje za pomoc!
kod:
<html>
<head>
<meta charset="utf-8">
<title>Kot</title>
<style>
.koty {
margin-top: -170px;
width:380px;
height:190px;
background:url('mix_kotow.png') no-repeat
}
#kot_pierwszy {
animation: bieg_kota 4s steps(19), droga_kota-1 4s forwards;
}
@-webkit-keyframes bieg_kota {
0% {background-position:0 0;}
100% {background-position:0 -3800px;}
}
@-webkit-keyframes droga_kota-1
{
0% {-webkit-transform:translateX(500px) scale(0.5);}
100% {-webkit-transform:translateX(225px) scale(0.5);}
}
</style>
</head>
<body>
<div class="drzewo">
<img src="next.jpg">
</div>
<div id="kot_pierwszy" class="koty">
</div>
</body>
</html>