.gka-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 500px;
    height: 800px;
    margin: auto;
    pointer-events: none;
}


@media screen and  (orientation:  portrait){
   
}

.animation {
    width: 1px;
    height: 1px;
    background-image: url("./img/sprites.png");
    /*background-position: -2282px -176px;*/
    background-size: 2284px 2045px;

    background-repeat: no-repeat;
    animation-name: keyframes-boya3;
    animation-duration: 2.52s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
}

@keyframes keyframes-boya3 {
    0% {
        width: 1px;
        height: 1px;
        background-image: url("./img/sprites.png");
        background-position: -2282px -176px;
        background-size: 2284px 2045px;
    }

    3.17% {
        width: 159px;
        height: 19px;
        background-position: -2094px -609px;
        transform: translate(168px, 0px);
    }

    4.76% {
        width: 177px;
        height: 46px;
        background-position: -2094px -563px;
        transform: translate(161px, 0px);
    }

    6.35% {
        width: 179px;
        height: 87px;
        background-position: -2094px -476px;
        transform: translate(160px, 0px);
    }

    7.94% {
        width: 177px;
        height: 154px;
        background-position: -2094px -322px;
        transform: translate(161px, 0px);
    }

    9.52% {
        width: 184px;
        height: 236px;
        background-position: -1717px -562px;
        transform: translate(158px, 50px);
    }

    11.11% {
        width: 195px;
        height: 166px;
        background-position: -801px -1521px;
        transform: translate(152px, 269px);
    }

    12.70% {
        width: 201px;
        height: 87px;
        background-position: -777px -1693px;
        transform: translate(149px, 361px);
    }

    14.29% {
        width: 198px;
        height: 103px;
        background-position: -1774px -1521px;
        transform: translate(150px, 374px);
    }

    15.87% {
        width: 193px;
        height: 129px;
        background-position: -1581px -1521px;
        transform: translate(153px, 334px);
    }

    17.46% {
        width: 188px;
        height: 146px;
        background-position: -2094px -176px;
        transform: translate(155px, 301px);
    }

    19.05% {
        width: 184px;
        height: 196px;
        background-position: -1717px -1142px;
        transform: translate(157px, 288px);
    }

    20.63% {
        width: 187px;
        height: 199px;
        background-position: -1901px -562px;
        transform: translate(156px, 295px);
    }

    22.22% {
        width: 190px;
        height: 182px;
        background-position: -1901px -1142px;
        transform: translate(154px, 312px);
    }

    23.81% {
        width: 194px;
        height: 166px;
        background-position: -996px -1521px;
        transform: translate(152px, 328px);
    }

    25.40% {
        width: 196px;
        height: 154px;
        background-position: -1385px -1521px;
        transform: translate(151px, 340px);
    }

    26.98% {
        width: 195px;
        height: 160px;
        background-position: -1190px -1521px;
        transform: translate(152px, 334px);
    }

    28.57% {
        width: 193px;
        height: 169px;
        background-position: -195px -1873px;
        transform: translate(153px, 325px);
    }

    30.16% {
        width: 190px;
        height: 176px;
        background-position: -2094px 0px;
        transform: translate(154px, 318px);
    }

    31.75% {
        width: 189px;
        height: 180px;
        background-position: 0px -1693px;
        transform: translate(155px, 314px);
    }

    33.33% {
        width: 192px;
        height: 177px;
        background-position: -189px -1693px;
        transform: translate(153px, 317px);
    }

    34.92% {
        width: 195px;
        height: 172px;
        background-position: 0px -1873px;
        transform: translate(152px, 322px);
    }

    36.51% {
        width: 198px;
        height: 168px;
        background-position: -579px -1693px;
        transform: translate(150px, 326px);
    }

    38.10% {
        width: 201px;
        height: 166px;
        background-position: -600px -1521px;
        transform: translate(149px, 328px);
    }

    39.68% {
        height: 168px;
        background-position: -399px -1521px;
        transform: translate(149px, 326px);
    }

    41.27% {
        width: 200px;
        height: 170px;
        background-position: -199px -1521px;
        transform: translate(149px, 324px);
    }

    42.86% {
        width: 198px;
        height: 171px;
        background-position: -381px -1693px;
        transform: translate(149px, 323px);
    }

    44.44% {
        width: 199px;
        height: 172px;
        background-position: 0px -1521px;
        transform: translate(146px, 322px);
    }

    46.03% {
        width: 207px;
        background-position: -1717px -1338px;
        transform: translate(142px, 322px);
    }

    47.62% {
        width: 221px;
        background-position: -1717px -970px;
        transform: translate(134px, 322px);
    }

    49.21% {
        width: 241px;
        background-position: -1717px -798px;
        transform: translate(123px, 322px);
    }

    50.79% {
        width: 270px;
        background-position: -1717px -390px;
        transform: translate(107px, 322px);
    }

    52.38% {
        width: 317px;
        background-position: -1717px -218px;
        transform: translate(79px, 322px);
    }

    53.97% {
        width: 396px;
        height: 182px;
        background-position: -1214px -1311px;
        transform: translate(31px, 312px);
    }

    55.56% {
        width: 459px;
        height: 198px;
        background-position: -444px 0px;
        transform: translate(16px, 296px);
    }

    57.14% {
        width: 444px;
        height: 219px;
        background-position: 0px 0px;
        transform: translate(24px, 275px);
    }

    58.73% {
        width: 399px;
        height: 223px;
        background-position: -903px -440px;
        transform: translate(46px, 271px);
    }

    60.32% {
        width: 377px;
        height: 218px;
        background-position: -1717px 0px;
        transform: translate(60px, 276px);
    }

    61.90% {
        width: 389px;
        height: 219px;
        background-position: -1311px -632px;
        transform: translate(52px, 275px);
    }

    63.49% {
        width: 401px;
        height: 224px;
        background-position: 0px -664px;
        transform: translate(45px, 270px);
    }

    65.08% {
        width: 410px;
        height: 221px;
        background-position: 0px -443px;
        transform: translate(41px, 273px);
    }

    66.67% {
        width: 408px;
        height: 219px;
        background-position: -903px 0px;
        transform: translate(42px, 275px);
    }

    68.25% {
        width: 401px;
        height: 224px;
        background-position: -401px -664px;
        transform: translate(46px, 270px);
    }

    69.84% {
        width: 403px;
        height: 221px;
        background-position: -903px -219px;
        transform: translate(48px, 273px);
    }

    71.43% {
        width: 408px;
        height: 220px;
        background-position: -410px -443px;
        transform: translate(46px, 274px);
    }

    73.02% {
        width: 411px;
        height: 224px;
        background-position: 0px -219px;
        transform: translate(44px, 270px);
    }

    74.60% {
        height: 221px;
        background-position: -444px -198px;
        transform: translate(43px, 273px);
    }

    76.19% {
        width: 407px;
        height: 213px;
        background-position: -903px -663px;
        transform: translate(43px, 281px);
    }

    77.78% {
        width: 404px;
        height: 211px;
        background-position: -1311px -210px;
        transform: translate(44px, 283px);
    }

    79.37% {
        background-position: -1311px -421px;
        transform: translate(45px, 283px);
    }

    80.95% {
        width: 407px;
        background-position: -814px -888px;
    }

    82.54% {
        height: 212px;
        background-position: 0px -888px;
        transform: translate(45px, 282px);
    }

    84.13% {
        background-position: -407px -888px;
    }

    85.71% {
        width: 405px;
        height: 211px;
        background-position: 0px -1100px;
        transform: translate(45px, 283px);
    }

    87.30% {
        width: 404px;
        height: 210px;
        background-position: -810px -1311px;
        transform: translate(45px, 284px);
    }

    88.89% {
        width: 405px;
        background-position: -1311px -851px;
    }

    90.48% {
        width: 406px;
        background-position: -405px -1100px;
    }

    92.06% {
        background-position: -811px -1100px;
    }

    93.65% {
        background-position: -1311px 0px;
    }

    95.24% {
        width: 405px;
        background-position: -1311px -1061px;
    }

    96.83% {
        background-position: 0px -1311px;
    }

    98.41%,
    100% {
        background-position: -405px -1311px;
        width:404px;
        height:210px;
        transform:translate(45px,284px);
    }
}