@keyframes move {
    from{
        bottom: 25px;
        left: 15px;
    }
    25%{
        bottom: 191px;
        left: 248px;
    }
    
    10%{
        bottom: 191px;
        left: 248px;
        transform: rotate(-63deg);
    }
    15%{
        bottom: 320px;
        left: 428px;
        transform: rotate(-63deg);
    }
    20% {
        bottom: 320px;
        left: 428px;
        transform: rotate(-3deg);
    }
    25%{
        bottom: 320px;
        left: 428px;
        transform: rotate(-3deg);
    }
    30%{
        bottom: 175px;
        left: 657px;
        transform: rotate(-3deg);
    }
    35%{
        bottom: 175px;
        left: 657px;
        transform: rotate(-70deg);
    }
    40%{
        bottom: 364px;
        left: 819px;
        transform: rotate(-70deg);
    }
    45%{
        bottom: 364px;
        left: 819px;
        transform: rotate(23deg);
    }
    50%{
        bottom: 99px;
        left: 1070px;
        transform: rotate(23deg);
    }
    55%{
        bottom: 83px;
        left: 1072px;
        transform: rotate(-97deg);
    }
    60%{
        bottom: 338px;
        left: 1152px;
        transform: rotate(-97deg);
    }
    to{
        bottom: 338px;
        left: 1152px;
        transform: rotate(-97deg);
    }
    /* 100%{
        transform: rotate(-63deg);
    } */
    /* 2%{

    } */

}


@keyframes phoneanim {
    from {
        left: -39px;
        top: -41px;
        transform: rotate(0deg);
    }
    5%{
        top: 40px;
        left: 153px;
        transform: rotate(0deg);
    }
    10%{
        top: 40px;
        left: 153px;
        transform: rotate(97deg);
    }
    15%{
        top: 191px;
        left: 10px;
        transform: rotate(97deg);
    }
    20%{
        top: 191px;
        left: 10px;
        transform: rotate(0deg);
    }
    25%{
        top: 258px;
        left: 204px;
        transform: rotate(0deg);
    }
    30%{
        top: 258px;
        left: 204px;
        transform: rotate(96deg);
    }
    35%{
        top: 430px;
        left: 89px;
        transform: rotate(96deg);
    }
    40%{
        top: 430px;
        left: 89px;
        transform: rotate(24deg);
    }
    45%{
        top: 583px;
        left: 217px;
        transform: rotate(24deg);
    }
    50%{
        top: 583px;
        left: 217px;
        transform: rotate(90deg);
    }
    55%{
        top: 766px;
        left: 117px;
        transform: rotate(90deg);
    }
    to{
        top: 766px;
        left: 117px;
        transform: rotate(90deg);
    }
    /* 23%{
        top: 290px;
        right: 79px;
        transform: rotate(0deg);
    } */
    /* 25%{
        top: 290px;
        right: 79px;
        transform: rotate(0deg);
    } */
    /* 25%{
        top: 290px;
        right: 79px;
        transform: rotate(0deg);
    } */
    /* to{
        top: 290px;
        right: 79px;
        transform: rotate(0deg);
    } */
}

.roadbox .sheep{
    width: 140px;
    height: fit-content;
    position: absolute;
    bottom: 25px;
    left: 15px;
    z-index: 9;
    transform: rotate(-50deg);
}

.roadbox .sheep.action{
    animation-name: move;
    animation-fill-mode: both;
    animation-duration: 100s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-play-state: paused;
}

.non-action{
    position: absolute;
    right: 39%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    color: black;
    width: 225px;
    text-wrap: nowrap;
    overflow: hidden;
}

.non-action .sheep{
    width: 110px;
    height: fit-content;
    /* transform: rotate(-27deg); */
}

.roadbox:hover .sheep.action{
    animation-play-state: running;
}
@media (max-width:700px) {
    .roadbox .sheep{
        left: -39px;
        top: -41px;
        transform: rotate(-1deg);
    }
    .roadbox .sheep.action{
        animation-name: phoneanim;
        animation-fill-mode: both;
        animation-duration: 100s;
        animation-direction: alternate;
        animation-timing-function: linear;
    }
    .non-action{
        bottom: -32px;
    }
}