/*ヘビのエリア*/
.snakePos{/*落下操作はここに対して行う*/
    position:absolute; 
    bottom:150px;
    left:400px;
}

.snakeScale{/*ここで基本的な大きさや向きを記述。*/
    transform:scale(-0.5,0.8);
}

.snake{
    /*ここにヘビ全体のアニメーション(ジャンプなど)を行う*/
}
.snake .head{
    position:absolute;
    width:50px;
    height:50px;
    background-color: green;
    color:black;
    font-size:30px;
}
.snake .tongue{
    position:absolute;
    width:20px;
    height:5px;
    background-color: red;
    top:35px;
    left:-15px;
}
.snake .neck{
    position:absolute;
    width:30px;
    height:60px;
    background-color: green;
    top:35px;
    left:35px;
    transform:rotate(-30deg);
}
.snake .body_1{
    position:absolute;
    width:100px;
    height:30px;
    background-color: green;
    top:80px;
    left:45px;
    color:black;
    font-size: 30px;
}

.snake .fire{
    position:absolute;
    width:20px;
    height:20px;
    left:0px;
    background-color: red;
    transform: scale(0,0);
    transform: scaleX(0px);
}

.snake * {
    animation-name: SnakeMove;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /*transform: scale(1.2,1.2);*/
}



/*snake animation*/
@keyframes SnakeMove {
    0%{
        transform: translateY(0px);
    }
    25%{
        transform: translateY(5px);
    }
    50%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0px);
    }
}
@keyframes SnakeFire_H{
    0%{
        transform: translateX(0px);
    }
    25%{
        transform: translateX(20px);
    }
    50%{
        transform: translateX(22px);
    }
    75%{
        transform: translateX(-5px);
    }
    100%{
        transform: translateX(0px);
    }
}
@keyframes SnakeFire_N{
    0%{
        transform: rotate(-30deg);
    }
    25%{
        transform: rotate(30deg);
    }
    50%{
        transform: rotate(30deg);
    }
    75%{
        transform: rotate(-40deg);
    }
    100%{
        transform: rotate(-30deg);
    }
}
@keyframes SnakeFire_F{
    0%{
        transform: translateX(0px) scale(0,0);
    }            
    50%{
        transform: translateX(0px) scale(10,10);
    }           
    80%{
        transform: translateX(-360px) scale(10,10);
    }
    100%{
        transform: translate(-600px) scale(0,0);
    }
}

@keyframes SnakeFire_kusa{
    100%{
        width:0px;
    }
}

@keyframes SnakeJump{
    0%{
        transform: translateY(0px);
    }            
    45%{
        transform: translateY(-100px);
    }
    55%{
        transform: translateY(-100px);
    }
    100%{
        transform: translateY(0px);
    } 
}