.person {
    position: absolute;
    height: 75px;
    width: 0;
    color: #fff;
    left: 0;
    top: 60px;
    transform-origin: 50% 50% 0px;
    -webkit-animation: sprint 5s infinite ease-in;
}
.person .head:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -6px;
    height: 2.7px;
    width: 42px;
    border-radius: 20%;
    border: 4px solid white;
    background-color: #fff;
    transform-origin: 50% 100% 0px;
    z-index: 90;
}
.person .head {
    position: absolute;
    top: -30px;
    left: -6px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 4px solid white;
    transform-origin: 50% 100% 0px;
    z-index: 90;
    -webkit-animation: bob 2s infinite alternate;
}
.person .head:after {
    content: "";
    position: absolute;
    top: -12px;
    left: 9px;
    height: 12px;
    width: 15px;
    border-radius: 30%;
    border: 4px solid white;
    background-color: #fff;
    z-index: 90;
}
.person .torso {
    position: absolute;
    height: 60px;
    width: 0;
    border-left: 2px solid white;
    left: 0px;
    top: 15px;
    z-index: 90;
}
.person .part {
    position: absolute;
    left: 0;
    top: 75px;
    z-index: 90;
}
.person .part.arm {
    position: absolute;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    height: 45px;
    width: 39px;
    top: 15px;
    right: 300px;
    transform-origin: 0% 0% 0px;
    -webkit-animation: pump 1s infinite ease-in-out;
}
.person .part.arm.one {
    transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
    transform: rotate3d(0, 0, 1, -90deg);
    animation-delay: .5s;
}
.person .part.leg {
    height: 57px;
    width: 60px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    -webkit-animation: run 1s infinite ease-in;
    transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
    transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
    transform: rotate3d(0, 0, 1, 80deg);
    animation-delay: .5s;
}
.person .part .foot {
    position: absolute;
    top: 90px;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    z-index: 900;
    border: 3px solid red;
}
@keyframes run {
    0% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
    50% {
        transform: rotate3d(0, 0, 1, 150deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, -5deg);
    }
}
@keyframes bob {
    0% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    25% {
        transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
    }
    50% {
        transform: rotate3d(0, 0, 1, 5deg);
    }
    75% {
        transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
    }
}
@keyframes pump {
    0% {
        transform: rotate3d(0, 0, 1, 80deg);
    }
    50% {
        transform: rotate3d(0, 0, 1, -70deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 80deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate3d(0, 0, 1, -180deg);
    }
    25% {
        transform: rotate3d(0, 0, 1, -100deg);
    }
    75% {
        transform: rotate3d(0, 0, 1, 100deg);
    }
    100% {
        transform: rotate3d(0, 0, 1, 180deg);
    }
}
@keyframes sprint {
    0% {
        transform-origin: 50% 50% 0px;
        top:60px;left:0;
    }
    100% {
        top:60px;left:100%;
        transform-origin: 50% 50% 0px;

    }
}