@charset "utf-8";
.gka-base {
    width: 374px;
    height: 434px;

    background-repeat: no-repeat;
    background-position: center center;
    
    /* background-size: contain;*/
    
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    
    animation-timing-function: steps(1);

    /* 只播放一次，播放停止到最后一帧*/
    /* animation-iteration-count: 1; */ 
}

.JOE-animation {
    animation-name: JOE-keyframes;
    animation-duration: 3.7600000000000002s;
}

@-webkit-keyframes JOE-keyframes {
    0%{
        background-image: url("img/0000.png");
    }

    1.66%{
        background-image: url("img/0001.png");
    }

    3.32%{
        background-image: url("img/0002.png");
    }

    4.98%{
        background-image: url("img/0003.png");
    }

    6.64%{
        background-image: url("img/0004.png");
    }

    8.3%{
        background-image: url("img/0005.png");
    }

    9.96%{
        background-image: url("img/0006.png");
    }

    11.62%{
        background-image: url("img/0007.png");
    }

    13.28%{
        background-image: url("img/0008.png");
    }

    14.94%{
        background-image: url("img/0009.png");
    }

    16.6%{
        background-image: url("img/0010.png");
    }

    18.26%{
        background-image: url("img/0011.png");
    }

    19.92%{
        background-image: url("img/0012.png");
    }

    21.58%{
        background-image: url("img/0013.png");
    }

    23.24%{
        background-image: url("img/0014.png");
    }

    24.9%{
        background-image: url("img/0015.png");
    }

    26.56%{
        background-image: url("img/0016.png");
    }

    28.22%{
        background-image: url("img/0017.png");
    }

    29.88%{
        background-image: url("img/0018.png");
    }

    31.54%{
        background-image: url("img/0019.png");
    }

    33.2%{
        background-image: url("img/0020.png");
    }

    34.86%{
        background-image: url("img/0021.png");
    }

    36.52%{
        background-image: url("img/0022.png");
    }

    38.18%{
        background-image: url("img/0023.png");
    }

    39.84%{
        background-image: url("img/0024.png");
    }

    41.5%{
        background-image: url("img/0025.png");
    }

    43.16%{
        background-image: url("img/0026.png");
    }

    44.82%{
        background-image: url("img/0027.png");
    }

    46.48%{
        background-image: url("img/0028.png");
    }

    48.14%{
        background-image: url("img/0029.png");
    }

    49.8%{
        background-image: url("img/0030.png");
    }

    51.46%{
        background-image: url("img/0031.png");
    }

    53.12%{
        background-image: url("img/0032.png");
    }

    54.78%{
        background-image: url("img/0033.png");
    }

    56.44%{
        background-image: url("img/0034.png");
    }

    58.1%{
        background-image: url("img/0035.png");
    }

    59.76%{
        background-image: url("img/0036.png");
    }

    61.42%{
        background-image: url("img/0037.png");
    }

    63.08%{
        background-image: url("img/0038.png");
    }

    64.74%{
        background-image: url("img/0039.png");
    }

    66.4%{
        background-image: url("img/0040.png");
    }

    68.06%{
        background-image: url("img/0041.png");
    }

    69.72%{
        background-image: url("img/0042.png");
    }

    71.38%{
        background-image: url("img/0043.png");
    }

    73.04%{
        background-image: url("img/0044.png");
    }

    74.7%{
        background-image: url("img/0045.png");
    }

    76.36%{
        background-image: url("img/0046.png");
    }

    78.02%{
        background-image: url("img/0047.png");
    }

    79.68%{
        background-image: url("img/0048.png");
    }

    81.34%{
        background-image: url("img/0049.png");
    }

    83%{
        background-image: url("img/0050.png");
    }

    84.66%{
        background-image: url("img/0051.png");
    }

    86.32%{
        background-image: url("img/0052.png");
    }

    87.98%{
        background-image: url("img/0053.png");
    }

    89.64%{
        background-image: url("img/0054.png");
    }

    91.3%{
        background-image: url("img/0055.png");
    }

    92.96%{
        background-image: url("img/0056.png");
    }

    94.62%{
        background-image: url("img/0057.png");
    }

    96.28%{
        background-image: url("img/0058.png");
    }
    97.94%,
    100%{
        background-image: url("img/0059.png");
    }

}

.gka-wrap {
    width: 483px;
    height: 260px;
}

.animation {
    width: 483px;
    height: 260px;
    background-image: url("img2/21.png");
    background-size: 483px 260px;
    background-repeat: no-repeat;
    animation: movePlant 1.5s infinite alternate;
    
}

@keyframes keyframes-img2 {
    0% {
        width: 483px;
        height: 260px;
        background-image: url("img2/01.png");
        background-size: 483px 260px;
    }
    3.33% {
        background-image: url("img2/02.png");
    }
    6.67% {
        background-image: url("img2/03.png");
    }
    10.00% {
        background-image: url("img2/04.png");
    }
    13.33% {
        background-image: url("img2/05.png");
    }
    16.67% {
        background-image: url("img2/06.png");
    }
    20.00% {
        background-image: url("img2/07.png");
    }
    23.33% {
        background-image: url("img2/08.png");
    }
    26.67% {
        background-image: url("img2/09.png");
    }
    30.00% {
        background-image: url("img2/10.png");
    }
    33.33% {
        background-image: url("img2/11.png");
    }
    36.67% {
        background-image: url("img2/12.png");
    }
    40.00% {
        background-image: url("img2/13.png");
    }
    43.33% {
        background-image: url("img2/14.png");
    }
    46.67% {
        background-image: url("img2/15.png");
    }
    50.00% {
        background-image: url("img2/16.png");
    }
    53.33% {
        background-image: url("img2/17.png");
    }
    56.67% {
        background-image: url("img2/18.png");
    }
    60.00% {
        background-image: url("img2/19.png");
    }
    63.33% {
        background-image: url("img2/20.png");
    }
    66.67% {
        background-image: url("img2/21.png");
    }
    70.00% {
        background-image: url("img2/22.png");
    }
    73.33% {
        background-image: url("img2/23.png");
    }
    76.67% {
        background-image: url("img2/24.png");
    }
    80.00% {
        background-image: url("img2/25.png");
    }
    83.33% {
        background-image: url("img2/26.png");
    }
    86.67% {
        background-image: url("img2/27.png");
    }
    90.00% {
        background-image: url("img2/28.png");
    }
    93.33% {
        background-image: url("img2/29.png");
    }
    96.67%,
    100% {
        background-image: url("img2/30.png");
    }
}