.n{
    animation: 2s n infinite linear;
    -webkit-animation: 2s n infinite linear;
}
.no{
    animation: 2s no infinite linear;
    -webkit-animation: 2s no infinite linear;
}
.nw{
    animation: 2s nw infinite linear;
    -webkit-animation: 2s nw infinite linear;
}
.s{
    animation: 2s s infinite linear;
    -webkit-animation: 2s s infinite linear;
}
.so{
    animation: 2s so infinite linear;
    -webkit-animation: 2s so infinite linear;
}
.sw{
    animation: 2s sw infinite linear;
    -webkit-animation: 2s sw infinite linear;
}
.o{
    animation: 2s o infinite linear;
    -webkit-animation: 2s o infinite linear;
}
.w{
    animation: 2s w infinite linear;
    -webkit-animation: 2s w infinite linear;
}

@keyframes n {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }

    90% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@-webkit-keyframes n {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }

    90% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes no {
    0% {
        transform: rotate(45deg);
    }
    15% {
        transform: rotate(55deg);
    }
    50% {
        transform: rotate(50deg);
    }
    75% {
        transform: rotate(40deg);
    }

    90% {
        transform: rotate(55deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@-webkit-keyframes no {
    0% {
        transform: rotate(45deg);
    }
    15% {
        transform: rotate(55deg);
    }
    50% {
        transform: rotate(50deg);
    }
    75% {
        transform: rotate(40deg);
    }

    90% {
        transform: rotate(55deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes nw {
    0% {
        transform: rotate(-45deg);
    }
    15% {
        transform: rotate(-55deg);
    }
    50% {
        transform: rotate(-50deg);
    }
    75% {
        transform: rotate(-40deg);
    }

    90% {
        transform: rotate(-55deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@-webkit-keyframes nw {
    0% {
        transform: rotate(-45deg);
    }
    15% {
        transform: rotate(-55deg);
    }
    50% {
        transform: rotate(-50deg);
    }
    75% {
        transform: rotate(-40deg);
    }

    90% {
        transform: rotate(-55deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes s {
    0% {
        transform: rotate(180deg);
    }
    15% {
        transform: rotate(170deg);
    }
    50% {
        transform: rotate(185deg);
    }
    75% {
        transform: rotate(175deg);
    }

    90% {
        transform: rotate(190deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
@-webkit-keyframes s {
    0% {
        transform: rotate(90deg);
    }
    15% {
        transform: rotate(80deg);
    }
    50% {
        transform: rotate(95deg);
    }
    75% {
        transform: rotate(85deg);
    }

    90% {
        transform: rotate(100deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

@keyframes so {
    0% {
        transform: rotate(135deg);
    }
    15% {
        transform: rotate(125deg);
    }
    50% {
        transform: rotate(130deg);
    }
    75% {
        transform: rotate(140deg);
    }

    90% {
        transform: rotate(125deg);
    }
    100% {
        transform: rotate(135deg);
    }
}
@-webkit-keyframes so {
    0% {
        -webkit-transform: rotate(-130deg);
    }
    25% {
        -webkit-transform: rotate(-140deg);
    }
    100% {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes sw {
    0% {
        transform: rotate(-130deg);
    }
    25% {
        transform: rotate(-140deg);
    }
    100% {
        transform: rotate(-130deg);
    }
}
@-webkit-keyframes sw {
    0% {
        -webkit-transform: rotate(-130deg);
    }
    25% {
        -webkit-transform: rotate(-140deg);
    }
    100% {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes w {
    0% {
        transform: rotate(-90deg);
    }
    15% {
        transform: rotate(-80deg);
    }
    50% {
        transform: rotate(-95deg);
    }
    75% {
        transform: rotate(-85deg);
    }

    90% {
        transform: rotate(-100deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}
@-webkit-keyframes w {
    0% {
        transform: rotate(-90deg);
    }
    15% {
        transform: rotate(-80deg);
    }
    50% {
        transform: rotate(-95deg);
    }
    75% {
        transform: rotate(-85deg);
    }

    90% {
        transform: rotate(-100deg);
    }
    100% {
        transform: rotate(-90deg);
    }
}

@keyframes o {
    0% {
        transform: rotate(90deg);
    }
    15% {
        transform: rotate(80deg);
    }
    50% {
        transform: rotate(95deg);
    }
    75% {
        transform: rotate(85deg);
    }

    90% {
        transform: rotate(100deg);
    }
    100% {
        transform: rotate(90deg);
    }
}
@-webkit-keyframes o {
    0% {
        transform: rotate(90deg);
    }
    15% {
        transform: rotate(80deg);
    }
    50% {
        transform: rotate(95deg);
    }
    75% {
        transform: rotate(85deg);
    }

    90% {
        transform: rotate(100deg);
    }
    100% {
        transform: rotate(90deg);
    }
}