Animation d’un koala en HTML, CSS & JS

L’animation dure 25 secondes et est composée de 46 images. Ces 46 images font partie d’une seule et même image (cf. image). La majorité de ces images est donc utilisée plusieurs fois et l’animation joue au final un total de 424 images sur toute sa durée.

L’idée consiste à simplement ajouter une class sur la div ‘anim-koala’ toutes les 0.06 seconde (soit 424 fois) puis stopper l’animation sur la dernière image une fois terminée. Cette div ‘anim-koala’ contient l’image en background et chaque class additionnelle correspond à une position XY de ce background. Ainsi en paramétrant les coordonnées XY du background dans chaque classe supplémentaire, on voit le koala s’animer.

Ces classes supplémentaires ne font que changer la position X et Y du background.

HTML

‹div class="anim-koala"›‹/div›

CSS

.anim-koala {
       

position:relative;
       
width:462px;
       
height:365px;
       
margin:35px 0 50px 50px;
       
display:block;
       
overflow:hidden;
       
border:10px solid #FFF;
       
border-radius:10px;
       
background-repeat:no-repeat;
       
background:#e5b406 url(img/anim-koala.png) 0px 0px no-repeat;
}

/*Koala Animation*/
       
.anim-koala.koala-0 {background-position:0px 0px;}
       
.anim-koala.koala-1 {background-position:-462px 0px;}
       
.anim-koala.koala-2 {background-position:-462px 0px;}
       
.anim-koala.koala-3 {background-position:-462px 0px;}
       
.anim-koala.koala-4 {background-position:-462px 0px;}
       
.anim-koala.koala-5 {background-position:-462px 0px;}
       
.anim-koala.koala-0 {background-position:0px 0px;}
       
.anim-koala.koala-1 {background-position:-462px 0px;}
       
.anim-koala.koala-2 {background-position:-462px 0px;}
       
.anim-koala.koala-3 {background-position:-462px 0px;}
       
.anim-koala.koala-4 {background-position:-462px 0px;}
       
.anim-koala.koala-5 {background-position:-462px 0px;}
       
.anim-koala.koala-6 {background-position:-462px 0px;}
       
.anim-koala.koala-7 {background-position:-462px 0px;}
       
.anim-koala.koala-8 {background-position:-924px 0px;}
       
.anim-koala.koala-9 {background-position:-1386px 0px;}
       
.anim-koala.koala-10 {background-position:-1848px 0px;}
       
.anim-koala.koala-11 {background-position:-1848px 0px;}
       
.anim-koala.koala-12 {background-position:-1848px 0px;}
       
.anim-koala.koala-13 {background-position:-1848px 0px;}
       
.anim-koala.koala-14 {background-position:-1848px 0px;}
       
.anim-koala.koala-15 {background-position:-1848px 0px;}
       
.anim-koala.koala-16 {background-position:-1848px 0px;}
       
.anim-koala.koala-17 {background-position:-1848px 0px;}
       
.anim-koala.koala-18 {background-position:-1848px 0px;}
       
.anim-koala.koala-19 {background-position:-1848px 0px;}
       
.anim-koala.koala-20 {background-position:-1848px 0px;}
       
.anim-koala.koala-21 {background-position:-2310px 0px;}
       
.anim-koala.koala-22 {background-position:0px -365px;}
       
.anim-koala.koala-23 {background-position:-462px -365px;}
       
.anim-koala.koala-24 {background-position:0px -365px;}
       
.anim-koala.koala-25 {background-position:-2310px 0px;}
       
.anim-koala.koala-26 {background-position:-1848px 0px;}
       
.anim-koala.koala-27 {background-position:-1848px 0px;}
       
.anim-koala.koala-28 {background-position:-1848px 0px;}
       
.anim-koala.koala-29 {background-position:-1848px 0px;}
       
.anim-koala.koala-30 {background-position:-1848px 0px;}
       
.anim-koala.koala-31 {background-position:-1848px 0px;}
       
.anim-koala.koala-32 {background-position:-1848px 0px;}
       
.anim-koala.koala-33 {background-position:-1848px 0px;}
       
.anim-koala.koala-34 {background-position:-1848px 0px;}
       
.anim-koala.koala-35 {background-position:-1848px 0px;}
       
.anim-koala.koala-36 {background-position:-1848px 0px;}
       
.anim-koala.koala-37 {background-position:-1848px 0px;}
       
.anim-koala.koala-38 {background-position:-1848px 0px;}
       
.anim-koala.koala-39 {background-position:-1848px 0px;}
       
.anim-koala.koala-40 {background-position:-1848px 0px;}
       
.anim-koala.koala-41 {background-position:-1848px 0px;}
       
.anim-koala.koala-42 {background-position:-1848px 0px;}
       
.anim-koala.koala-43 {background-position:-1848px 0px;}
       
.anim-koala.koala-44 {background-position:-1848px 0px;}
       
.anim-koala.koala-45 {background-position:-1848px 0px;}
       
.anim-koala.koala-46 {background-position:-1848px 0px;}
       
.anim-koala.koala-47 {background-position:-1848px 0px;}
       
.anim-koala.koala-48 {background-position:-1848px 0px;}
       
.anim-koala.koala-49 {background-position:-924px -365px;}
       
.anim-koala.koala-50 {background-position:-924px -365px;}
       
.anim-koala.koala-51 {background-position:-924px -365px;}
       
.anim-koala.koala-52 {background-position:-924px -365px;}
       
.anim-koala.koala-53 {background-position:-924px -365px;}
       
.anim-koala.koala-54 {background-position:-924px -365px;}
       
.anim-koala.koala-55 {background-position:-924px -365px;}
       
.anim-koala.koala-56 {background-position:-924px -365px;}
       
.anim-koala.koala-57 {background-position:-924px -365px;}
       
.anim-koala.koala-58 {background-position:-924px -365px;}
       
.anim-koala.koala-59 {background-position:-1386px -365px;}
       
.anim-koala.koala-60 {background-position:-1848px -365px;}
       
.anim-koala.koala-61 {background-position:-2310px -365px;}
       
.anim-koala.koala-62 {background-position:0px -730px;}
       
.anim-koala.koala-63 {background-position:-462px -730px;}
       
.anim-koala.koala-64 {background-position:-924px -730px;}
       
.anim-koala.koala-65 {background-position:-1386px -730px;}
       
.anim-koala.koala-66 {background-position:-1848px -730px;}
       
.anim-koala.koala-67 {background-position:-2310px -730px;}
       
.anim-koala.koala-68 {background-position:0px -1095px;}
       
.anim-koala.koala-69 {background-position:-462px -1095px;}
       
.anim-koala.koala-70 {background-position:-924px -1095px;}
       
.anim-koala.koala-71 {background-position:-1386px -1095px;}
       
.anim-koala.koala-72 {background-position:-1848px -1095px;}
       
.anim-koala.koala-73 {background-position:-2310px -1095px;}
       
.anim-koala.koala-74 {background-position:0px -1460px;}
       
.anim-koala.koala-75 {background-position:-462px -1460px;}
       
.anim-koala.koala-76 {background-position:-924px -1460px;}
       
.anim-koala.koala-77 {background-position:-1386px -1460px;}
       
.anim-koala.koala-78 {background-position:-1848px -1460px;}
       
.anim-koala.koala-79 {background-position:-2310px -1460px;}
       
.anim-koala.koala-80 {background-position:0px -1825px;}
       
.anim-koala.koala-81 {background-position:-462px -1825px;}
       
.anim-koala.koala-82 {background-position:-924px -1825px;}
       
.anim-koala.koala-83 {background-position:-1386px -1825px;}
       
.anim-koala.koala-84 {background-position:-1848px -1825px;}
       
.anim-koala.koala-85 {background-position:-1848px -1825px;}
       
.anim-koala.koala-86 {background-position:-1848px -1825px;}
       
.anim-koala.koala-87 {background-position:-1848px -1825px;}
       
.anim-koala.koala-88 {background-position:-2310px -1825px;}
       
.anim-koala.koala-89 {background-position:-2310px -1825px;}
       
.anim-koala.koala-90 {background-position:0px -2190px;}
       
.anim-koala.koala-91 {background-position:0px -2190px;}
       
.anim-koala.koala-92 {background-position:-2310px -1825px;}
       
.anim-koala.koala-93 {background-position:-2310px -1825px;}
       
.anim-koala.koala-94 {background-position:-1848px -1825px;}
       
.anim-koala.koala-95 {background-position:-1848px -1825px;}
       
.anim-koala.koala-96 {background-position:-1848px -1825px;}
       
.anim-koala.koala-97 {background-position:-1848px -1825px;}
       
.anim-koala.koala-98 {background-position:-2310px -1825px;}
       
.anim-koala.koala-99 {background-position:-2310px -1825px;}
       
.anim-koala.koala-100 {background-position:0px -2190px;}
       
.anim-koala.koala-101 {background-position:0px -2190px;}
       
.anim-koala.koala-102 {background-position:-2310px -1825px;}
       
.anim-koala.koala-103 {background-position:-2310px -1825px;}
       
.anim-koala.koala-104 {background-position:-1848px -1825px;}
       
.anim-koala.koala-105 {background-position:-1848px -1825px;}
       
.anim-koala.koala-106 {background-position:-1848px -1825px;}
       
.anim-koala.koala-107 {background-position:-1848px -1825px;}
       
.anim-koala.koala-108 {background-position:-2310px -1825px;}
       
.anim-koala.koala-109 {background-position:-2310px -1825px;}
       
.anim-koala.koala-110 {background-position:0px -2190px;}
       
.anim-koala.koala-111 {background-position:0px -2190px;}
       
.anim-koala.koala-112 {background-position:-2310px -1825px;}
       
.anim-koala.koala-113 {background-position:-2310px -1825px;}
       
.anim-koala.koala-114 {background-position:-1848px -1825px;}
       
.anim-koala.koala-115 {background-position:-1848px -1825px;}
       
.anim-koala.koala-116 {background-position:-1848px -1825px;}
       
.anim-koala.koala-117 {background-position:-1848px -1825px;}
       
.anim-koala.koala-118 {background-position:-2310px -1825px;}
       
.anim-koala.koala-119 {background-position:-2310px -1825px;}
       
.anim-koala.koala-120 {background-position:0px -2190px;}
       
.anim-koala.koala-121 {background-position:0px -2190px;}
       
.anim-koala.koala-122 {background-position:-2310px -1825px;}
       
.anim-koala.koala-123 {background-position:-2310px -1825px;}
       
.anim-koala.koala-124 {background-position:-1848px -1825px;}
       
.anim-koala.koala-125 {background-position:-1848px -1825px;}
       
.anim-koala.koala-126 {background-position:-1848px -1825px;}
       
.anim-koala.koala-127 {background-position:-1848px -1825px;}
       
.anim-koala.koala-128 {background-position:-2310px -1825px;}
       
.anim-koala.koala-129 {background-position:-2310px -1825px;}
       
.anim-koala.koala-130 {background-position:0px -2190px;}
       
.anim-koala.koala-131 {background-position:0px -2190px;}
       
.anim-koala.koala-132 {background-position:-2310px -1825px;}
       
.anim-koala.koala-133 {background-position:-2310px -1825px;}
       
.anim-koala.koala-134 {background-position:-1848px -1825px;}
       
.anim-koala.koala-135 {background-position:-1848px -1825px;}
       
.anim-koala.koala-136 {background-position:-1848px -1825px;}
       
.anim-koala.koala-137 {background-position:-1848px -1825px;}
       
.anim-koala.koala-138 {background-position:-2310px -1825px;}
       
.anim-koala.koala-139 {background-position:-2310px -1825px;}
       
.anim-koala.koala-140 {background-position:0px -2190px;}
       
.anim-koala.koala-141 {background-position:0px -2190px;}
       
.anim-koala.koala-142 {background-position:-2310px -1825px;}
       
.anim-koala.koala-143 {background-position:-2310px -1825px;}
       
.anim-koala.koala-144 {background-position:-1848px -1825px;}
       
.anim-koala.koala-145 {background-position:-1848px -1825px;}
       
.anim-koala.koala-146 {background-position:-1848px -1825px;}
       
.anim-koala.koala-147 {background-position:-1848px -1825px;}
       
.anim-koala.koala-148 {background-position:-2310px -1825px;}
       
.anim-koala.koala-149 {background-position:-2310px -1825px;}
       
.anim-koala.koala-150 {background-position:0px -2190px;}
       
.anim-koala.koala-151 {background-position:0px -2190px;}
       
.anim-koala.koala-152 {background-position:-2310px -1825px;}
       
.anim-koala.koala-153 {background-position:-2310px -1825px;}
       
.anim-koala.koala-154 {background-position:-1848px -1825px;}
       
.anim-koala.koala-155 {background-position:-1848px -1825px;}
       
.anim-koala.koala-156 {background-position:-462px -2190px;}
       
.anim-koala.koala-157 {background-position:-462px -2190px;}
       
.anim-koala.koala-158 {background-position:-924px -2190px;}
       
.anim-koala.koala-159 {background-position:-924px -2190px;}
       
.anim-koala.koala-160 {background-position:-1386px -2190px;}
       
.anim-koala.koala-161 {background-position:-1386px -2190px;}
       
.anim-koala.koala-162 {background-position:-924px -2190px;}
       
.anim-koala.koala-163 {background-position:-924px -2190px;}
       
.anim-koala.koala-164 {background-position:-462px -2190px;}
       
.anim-koala.koala-165 {background-position:-462px -2190px;}
       
.anim-koala.koala-166 {background-position:-462px -2190px;}
       
.anim-koala.koala-167 {background-position:-462px -2190px;}
       
.anim-koala.koala-168 {background-position:-924px -2190px;}
       
.anim-koala.koala-169 {background-position:-924px -2190px;}
       
.anim-koala.koala-170 {background-position:-1386px -2190px;}
       
.anim-koala.koala-171 {background-position:-1386px -2190px;}
       
.anim-koala.koala-172 {background-position:-924px -2190px;}
       
.anim-koala.koala-173 {background-position:-924px -2190px;}
       
.anim-koala.koala-174 {background-position:-462px -2190px;}
       
.anim-koala.koala-175 {background-position:-462px -2190px;}
       
.anim-koala.koala-176 {background-position:-462px -2190px;}
       
.anim-koala.koala-177 {background-position:-462px -2190px;}
       
.anim-koala.koala-178 {background-position:-462px -2190px;}
       
.anim-koala.koala-179 {background-position:-462px -2190px;}
       
.anim-koala.koala-180 {background-position:-462px -2190px;}
       
.anim-koala.koala-181 {background-position:-462px -2190px;}
       
.anim-koala.koala-182 {background-position:-462px -2190px;}
       
.anim-koala.koala-183 {background-position:-462px -2190px;}
       
.anim-koala.koala-184 {background-position:-462px -2190px;}
       
.anim-koala.koala-185 {background-position:-462px -2190px;}
       
.anim-koala.koala-186 {background-position:-462px -2190px;}
       
.anim-koala.koala-187 {background-position:-462px -2190px;}
       
.anim-koala.koala-188 {background-position:-462px -2190px;}
       
.anim-koala.koala-189 {background-position:-462px -2190px;}
       
.anim-koala.koala-190 {background-position:-462px -2190px;}
       
.anim-koala.koala-191 {background-position:-462px -2190px;}
       
.anim-koala.koala-192 {background-position:-462px -2190px;}
       
.anim-koala.koala-193 {background-position:-462px -2190px;}
       
.anim-koala.koala-194 {background-position:-462px -2190px;}
       
.anim-koala.koala-195 {background-position:-462px -2190px;}
       
.anim-koala.koala-196 {background-position:-462px -2190px;}
       
.anim-koala.koala-197 {background-position:-462px -2190px;}
       
.anim-koala.koala-198 {background-position:-924px -2190px;}
       
.anim-koala.koala-199 {background-position:-924px -2190px;}
       
.anim-koala.koala-200 {background-position:-1386px -2190px;}
       
.anim-koala.koala-201 {background-position:-1386px -2190px;}
       
.anim-koala.koala-202 {background-position:-924px -2190px;}
       
.anim-koala.koala-203 {background-position:-924px -2190px;}
       
.anim-koala.koala-204 {background-position:-462px -2190px;}
       
.anim-koala.koala-205 {background-position:-462px -2190px;}
       
.anim-koala.koala-206 {background-position:-462px -2190px;}
       
.anim-koala.koala-207 {background-position:-462px -2190px;}
       
.anim-koala.koala-208 {background-position:-924px -2190px;}
       
.anim-koala.koala-209 {background-position:-924px -2190px;}
       
.anim-koala.koala-210 {background-position:-1386px -2190px;}
       
.anim-koala.koala-211 {background-position:-1386px -2190px;}
       
.anim-koala.koala-212 {background-position:-924px -2190px;}
       
.anim-koala.koala-213 {background-position:-924px -2190px;}
       
.anim-koala.koala-214 {background-position:-462px -2190px;}
       
.anim-koala.koala-215 {background-position:-462px -2190px;}
       
.anim-koala.koala-216 {background-position:-462px -2190px;}
       
.anim-koala.koala-217 {background-position:-462px -2190px;}
       
.anim-koala.koala-218 {background-position:-924px -2190px;}
       
.anim-koala.koala-219 {background-position:-924px -2190px;}
       
.anim-koala.koala-220 {background-position:-1386px -2190px;}
       
.anim-koala.koala-221 {background-position:-1386px -2190px;}
       
.anim-koala.koala-222 {background-position:-924px -2190px;}
       
.anim-koala.koala-223 {background-position:-924px -2190px;}
       
.anim-koala.koala-224 {background-position:-462px -2190px;}
       
.anim-koala.koala-225 {background-position:-462px -2190px;}
       
.anim-koala.koala-226 {background-position:-462px -2190px;}
       
.anim-koala.koala-227 {background-position:-462px -2190px;}
       
.anim-koala.koala-228 {background-position:-924px -2190px;}
       
.anim-koala.koala-229 {background-position:-924px -2190px;}
       
.anim-koala.koala-230 {background-position:-1386px -2190px;}
       
.anim-koala.koala-231 {background-position:-1386px -2190px;}
       
.anim-koala.koala-232 {background-position:-924px -2190px;}
       
.anim-koala.koala-233 {background-position:-924px -2190px;}
       
.anim-koala.koala-234 {background-position:-462px -2190px;}
       
.anim-koala.koala-235 {background-position:-462px -2190px;}
       
.anim-koala.koala-236 {background-position:-462px -2190px;}
       
.anim-koala.koala-237 {background-position:-462px -2190px;}
       
.anim-koala.koala-238 {background-position:-924px -2190px;}
       
.anim-koala.koala-239 {background-position:-924px -2190px;}
       
.anim-koala.koala-240 {background-position:-1386px -2190px;}
       
.anim-koala.koala-241 {background-position:-1386px -2190px;}
       
.anim-koala.koala-242 {background-position:-924px -2190px;}
       
.anim-koala.koala-243 {background-position:-924px -2190px;}
       
.anim-koala.koala-244 {background-position:-462px -2190px;}
       
.anim-koala.koala-245 {background-position:-462px -2190px;}
       
.anim-koala.koala-246 {background-position:-1848px -2190px;}
       
.anim-koala.koala-247 {background-position:-1848px -2190px;}
       
.anim-koala.koala-248 {background-position:-2310px -2190px;}
       
.anim-koala.koala-249 {background-position:-2310px -2190px;}
       
.anim-koala.koala-250 {background-position:0px -2555px;}
       
.anim-koala.koala-251 {background-position:0px -2555px;}
       
.anim-koala.koala-252 {background-position:-2310px -2190px;}
       
.anim-koala.koala-253 {background-position:-2310px -2190px;}
       
.anim-koala.koala-254 {background-position:-1848px -2190px;}
       
.anim-koala.koala-255 {background-position:-1848px -2190px;}
       
.anim-koala.koala-256 {background-position:-1848px -2190px;}
       
.anim-koala.koala-257 {background-position:-1848px -2190px;}
       
.anim-koala.koala-258 {background-position:-2310px -2190px;}
       
.anim-koala.koala-259 {background-position:-2310px -2190px;}
       
.anim-koala.koala-260 {background-position:0px -2555px;}
       
.anim-koala.koala-261 {background-position:0px -2555px;}
       
.anim-koala.koala-262 {background-position:-2310px -2190px;}
       
.anim-koala.koala-263 {background-position:-2310px -2190px;}
       
.anim-koala.koala-264 {background-position:-1848px -2190px;}
       
.anim-koala.koala-265 {background-position:-1848px -2190px;}
       
.anim-koala.koala-266 {background-position:-1848px -2190px;}
       
.anim-koala.koala-267 {background-position:-1848px -2190px;}
       
.anim-koala.koala-268 {background-position:-2310px -2190px;}
       
.anim-koala.koala-269 {background-position:-2310px -2190px;}
       
.anim-koala.koala-270 {background-position:0px -2555px;}
       
.anim-koala.koala-271 {background-position:0px -2555px;}
       
.anim-koala.koala-272 {background-position:-2310px -2190px;}
       
.anim-koala.koala-273 {background-position:-2310px -2190px;}
       
.anim-koala.koala-274 {background-position:-1848px -2190px;}
       
.anim-koala.koala-275 {background-position:-1848px -2190px;}
       
.anim-koala.koala-276 {background-position:-1848px -2190px;}
       
.anim-koala.koala-277 {background-position:-1848px -2190px;}
       
.anim-koala.koala-278 {background-position:-2310px -2190px;}
       
.anim-koala.koala-279 {background-position:-2310px -2190px;}
       
.anim-koala.koala-280 {background-position:0px -2555px;}
       
.anim-koala.koala-281 {background-position:0px -2555px;}
       
.anim-koala.koala-282 {background-position:-2310px -2190px;}
       
.anim-koala.koala-283 {background-position:-2310px -2190px;}
       
.anim-koala.koala-284 {background-position:-1848px -2190px;}
       
.anim-koala.koala-285 {background-position:-1848px -2190px;}
       
.anim-koala.koala-286 {background-position:-1848px -2190px;}
       
.anim-koala.koala-287 {background-position:-1848px -2190px;}
       
.anim-koala.koala-288 {background-position:-924px -2555px;}
       
.anim-koala.koala-289 {background-position:-924px -2555px;}
       
.anim-koala.koala-290 {background-position:-1386px -2555px;}
       
.anim-koala.koala-291 {background-position:-1386px -2555px;}
       
.anim-koala.koala-292 {background-position:-924px -2555px;}
       
.anim-koala.koala-293 {background-position:-924px -2555px;}
       
.anim-koala.koala-294 {background-position:-462px -2555px;}
       
.anim-koala.koala-295 {background-position:-462px -2555px;}
       
.anim-koala.koala-296 {background-position:-462px -2555px;}
       
.anim-koala.koala-297 {background-position:-462px -2555px;}
       
.anim-koala.koala-298 {background-position:-924px -2555px;}
       
.anim-koala.koala-299 {background-position:-924px -2555px;}
       
.anim-koala.koala-300 {background-position:-1386px -2555px;}
       
.anim-koala.koala-301 {background-position:-1386px -2555px;}
       
.anim-koala.koala-302 {background-position:-924px -2555px;}
       
.anim-koala.koala-303 {background-position:-924px -2555px;}
       
.anim-koala.koala-304 {background-position:-462px -2555px;}
       
.anim-koala.koala-305 {background-position:-462px -2555px;}
       
.anim-koala.koala-306 {background-position:-462px -2555px;}
       
.anim-koala.koala-307 {background-position:-462px -2555px;}
       
.anim-koala.koala-308 {background-position:-924px -2555px;}
       
.anim-koala.koala-309 {background-position:-924px -2555px;}
       
.anim-koala.koala-310 {background-position:-1386px -2555px;}
       
.anim-koala.koala-311 {background-position:-1386px -2555px;}
       
.anim-koala.koala-312 {background-position:-924px -2555px;}
       
.anim-koala.koala-313 {background-position:-924px -2555px;}
       
.anim-koala.koala-314 {background-position:-462px -2555px;}
       
.anim-koala.koala-315 {background-position:-462px -2555px;}
       
.anim-koala.koala-316 {background-position:-462px -2555px;}
       
.anim-koala.koala-317 {background-position:-462px -2555px;}
       
.anim-koala.koala-318 {background-position:-924px -2555px;}
       
.anim-koala.koala-319 {background-position:-924px -2555px;}
       
.anim-koala.koala-320 {background-position:-1386px -2555px;}
       
.anim-koala.koala-321 {background-position:-1386px -2555px;}
       
.anim-koala.koala-322 {background-position:-924px -2555px;}
       
.anim-koala.koala-323 {background-position:-924px -2555px;}
       
.anim-koala.koala-324 {background-position:-462px -2555px;}
       
.anim-koala.koala-325 {background-position:-462px -2555px;}
       
.anim-koala.koala-326 {background-position:-1848px -2190px;}
       
.anim-koala.koala-327 {background-position:-1848px -2190px;}
       
.anim-koala.koala-328 {background-position:-1848px -2190px;}
       
.anim-koala.koala-329 {background-position:-1848px -2190px;}
       
.anim-koala.koala-330 {background-position:-1848px -2190px;}
       
.anim-koala.koala-331 {background-position:-1848px -2190px;}
       
.anim-koala.koala-332 {background-position:-1848px -2190px;}
       
.anim-koala.koala-333 {background-position:-1848px -2190px;}
       
.anim-koala.koala-334 {background-position:-1848px -2190px;}
       
.anim-koala.koala-335 {background-position:-1848px -2190px;}
       
.anim-koala.koala-336 {background-position:-1848px -2190px;}
       
.anim-koala.koala-337 {background-position:-1848px -2190px;}
       
.anim-koala.koala-338 {background-position:-1848px -2190px;}
       
.anim-koala.koala-339 {background-position:-1848px -2190px;}
       
.anim-koala.koala-340 {background-position:-1848px -2190px;}
       
.anim-koala.koala-341 {background-position:-1848px -2190px;}
       
.anim-koala.koala-342 {background-position:-1848px -2190px;}
       
.anim-koala.koala-343 {background-position:-1848px -2190px;}
       
.anim-koala.koala-344 {background-position:-1848px -2190px;}
       
.anim-koala.koala-345 {background-position:-1848px -2190px;}
       
.anim-koala.koala-346 {background-position:-1848px -2190px;}
       
.anim-koala.koala-347 {background-position:-1848px -2190px;}
       
.anim-koala.koala-348 {background-position:-1848px -2190px;}
       
.anim-koala.koala-349 {background-position:-1848px -2190px;}
       
.anim-koala.koala-350 {background-position:-1848px -2190px;}
       
.anim-koala.koala-351 {background-position:-1848px -2190px;}
       
.anim-koala.koala-352 {background-position:-1848px -2190px;}
       
.anim-koala.koala-353 {background-position:-1848px -2190px;}
       
.anim-koala.koala-354 {background-position:-462px -2555px;}
       
.anim-koala.koala-355 {background-position:-462px -2555px;}
       
.anim-koala.koala-356 {background-position:-462px -2555px;}
       
.anim-koala.koala-357 {background-position:-462px -2555px;}
       
.anim-koala.koala-358 {background-position:-1848px -2190px;}
       
.anim-koala.koala-359 {background-position:-1848px -2190px;}
       
.anim-koala.koala-360 {background-position:-1848px -2190px;}
       
.anim-koala.koala-361 {background-position:-1848px -2190px;}
       
.anim-koala.koala-362 {background-position:-1848px -2190px;}
       
.anim-koala.koala-363 {background-position:-1848px -2190px;}
       
.anim-koala.koala-364 {background-position:-1848px -2190px;}
       
.anim-koala.koala-365 {background-position:-1848px -2190px;}
       
.anim-koala.koala-366 {background-position:-1848px -2190px;}
       
.anim-koala.koala-367 {background-position:-1848px -2190px;}
       
.anim-koala.koala-368 {background-position:-1848px -2190px;}
       
.anim-koala.koala-369 {background-position:-1848px -2190px;}
       
.anim-koala.koala-370 {background-position:-1848px -2190px;}
       
.anim-koala.koala-371 {background-position:-1848px -2190px;}
       
.anim-koala.koala-372 {background-position:-1848px -2190px;}
       
.anim-koala.koala-373 {background-position:-1848px -2190px;}
       
.anim-koala.koala-374 {background-position:-1848px -2190px;}
       
.anim-koala.koala-375 {background-position:-1848px -2190px;}
       
.anim-koala.koala-376 {background-position:-1848px -2190px;}
       
.anim-koala.koala-377 {background-position:-1848px -2190px;}
       
.anim-koala.koala-378 {background-position:-2310px -2190px;}
       
.anim-koala.koala-379 {background-position:-2310px -2190px;}
       
.anim-koala.koala-380 {background-position:0px -2555px;}
       
.anim-koala.koala-381 {background-position:0px -2555px;}
       
.anim-koala.koala-382 {background-position:-2310px -2190px;}
       
.anim-koala.koala-383 {background-position:-2310px -2190px;}
       
.anim-koala.koala-384 {background-position:-1848px -2190px;}
       
.anim-koala.koala-385 {background-position:-1848px -2190px;}
       
.anim-koala.koala-386 {background-position:-1848px -2190px;}
       
.anim-koala.koala-387 {background-position:-1848px -2190px;}
       
.anim-koala.koala-388 {background-position:-924px -2555px;}
       
.anim-koala.koala-389 {background-position:-924px -2555px;}
       
.anim-koala.koala-390 {background-position:-1386px -2555px;}
       
.anim-koala.koala-391 {background-position:-1386px -2555px;}
       
.anim-koala.koala-392 {background-position:-924px -2555px;}
       
.anim-koala.koala-393 {background-position:-924px -2555px;}
       
.anim-koala.koala-394 {background-position:-462px -2555px;}
       
.anim-koala.koala-395 {background-position:-462px -2555px;}
       
.anim-koala.koala-396 {background-position:-462px -2555px;}
       
.anim-koala.koala-397 {background-position:-462px -2555px;}
       
.anim-koala.koala-398 {background-position:-924px -2555px;}
       
.anim-koala.koala-399 {background-position:-924px -2555px;}
       
.anim-koala.koala-400 {background-position:-1386px -2555px;}
       
.anim-koala.koala-401 {background-position:-1386px -2555px;}
       
.anim-koala.koala-402 {background-position:-924px -2555px;}
       
.anim-koala.koala-403 {background-position:-924px -2555px;}
       
.anim-koala.koala-404 {background-position:-462px -2555px;}
       
.anim-koala.koala-405 {background-position:-462px -2555px;}
       
.anim-koala.koala-406 {background-position:-462px -2555px;}
       
.anim-koala.koala-407 {background-position:-462px -2555px;}
       
.anim-koala.koala-408 {background-position:-924px -2555px;}
       
.anim-koala.koala-409 {background-position:-924px -2555px;}
       
.anim-koala.koala-410 {background-position:-1386px -2555px;}
       
.anim-koala.koala-411 {background-position:-1386px -2555px;}
       
.anim-koala.koala-412 {background-position:-924px -2555px;}
       
.anim-koala.koala-413 {background-position:-924px -2555px;}
       
.anim-koala.koala-414 {background-position:-462px -2555px;}
       
.anim-koala.koala-415 {background-position:-462px -2555px;}
       
.anim-koala.koala-416 {background-position:-462px -2555px;}
       
.anim-koala.koala-417 {background-position:-462px -2555px;}
       
.anim-koala.koala-418 {background-position:-924px -2555px;}
       
.anim-koala.koala-419 {background-position:-924px -2555px;}
       
.anim-koala.koala-420 {background-position:-1386px -2555px;}
       
.anim-koala.koala-421 {background-position:-1386px -2555px;}
       
.anim-koala.koala-422 {background-position:-924px -2555px;}
       
.anim-koala.koala-423 {background-position:-924px -2555px;}
       
.anim-koala.koala-424 {background-position:-462px -2555px;}
       

JAVASCRIPT

var countK = 0
var timerStart = 2500
var timerChange = 60

$(document).ready(function() {
       
console.log('Go');
       
var setTimerStart = setTimeout(addKoala, timerStart);
});

function addKoala() {
       
$('.anim-koala').addClass('koala-'+countK);
       
var setTimerChange = setTimeout(animateKoala, timerStart);
}

function animateKoala () {
       
console.log(countK);
       
$('.anim-koala').removeClass('koala-'+countK);
       
countK = countK+1;
       
$('.anim-koala').addClass('koala-'+countK);
       
if (countK <=423 ){
       
       
var setTimerChange = setTimeout(animateKoala, timerChange);
       
}
}