.parent_animator:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;

}

/********** первый *************/
.parent_animator.one:before {
    top: 50%;
    left: 0;
    margin-top: -15px;
    margin-left: -15px;

    -webkit-animation-name: oneAnim;
    -moz-animation-name: oneAnim;
    animation-name: oneAnim;

    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    animation-duration: 4s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes oneAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        left: 0;
    }
    25% {
        opacity: 1;
        left: 0;
    }
    45% {
        opacity: .1;
        left: 50%;
    }
    50% {
        opacity: .1;
        left: 50%;
    }
    70% {
        opacity: 1;
        left: 100%;
    }
    75% {
        opacity: 1;
        left: 100%;
    }
    95% {
        opacity: .1;
        left: 50%;
    }
    100% {
        opacity: .1;
        left: 50%;
    }
}

@-moz-keyframes oneAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        left: 0;
    }
    25% {
        opacity: 1;
        left: 0;
    }
    45% {
        opacity: .1;
        left: 50%;
    }
    50% {
        opacity: .1;
        left: 50%;
    }
    70% {
        opacity: 1;
        left: 100%;
    }
    75% {
        opacity: 1;
        left: 100%;
    }
    95% {
        opacity: .1;
        left: 50%;
    }
    100% {
        opacity: .1;
        left: 50%;
    }
}

@-webkit-keyframes oneAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        left: 0;
    }
    25% {
        opacity: 1;
        left: 0;
    }
    45% {
        opacity: .1;
        left: 50%;
    }
    50% {
        opacity: .1;
        left: 50%;
    }
    70% {
        opacity: 1;
        left: 100%;
    }
    75% {
        opacity: 1;
        left: 100%;
    }
    95% {
        opacity: .1;
        left: 50%;
    }
    100% {
        opacity: .1;
        left: 50%;
    }
}

/************* второй **************/
.parent_animator.two:before {
    top: 0;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;

    -webkit-animation-name: twoAnim;
    -moz-animation-name: twoAnim;
    animation-name: twoAnim;

    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    animation-duration: 4s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes twoAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        top: 0;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    45% {
        opacity: .1;
        top: 50%;
    }
    50% {
        opacity: .1;
        top: 50%;
    }
    70% {
        opacity: 1;
        top: 100%;
    }
    75% {
        opacity: 1;
        top: 100%;
    }
    95% {
        opacity: .1;
        top: 50%;
    }
    100% {
        opacity: .1;
        top: 50%;
    }
}

@-moz-keyframes twoAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        top: 0;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    45% {
        opacity: .1;
        top: 50%;
    }
    50% {
        opacity: .1;
        top: 50%;
    }
    70% {
        opacity: 1;
        top: 100%;
    }
    75% {
        opacity: 1;
        top: 100%;
    }
    95% {
        opacity: .1;
        top: 50%;
    }
    100% {
        opacity: .1;
        top: 50%;
    }
}

@keyframes twoAnim {
    0% {
        opacity: .1;
        left: 50%;
        top: 50%;
    }
    20% {
        opacity: 1;
        top: 0;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    45% {
        opacity: .1;
        top: 50%;
    }
    50% {
        opacity: .1;
        top: 50%;
    }
    70% {
        opacity: 1;
        top: 100%;
    }
    75% {
        opacity: 1;
        top: 100%;
    }
    95% {
        opacity: .1;
        top: 50%;
    }
    100% {
        opacity: .1;
        top: 50%;
    }
}

/************* третий **************/
.parent_animator.three:before {
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;

    -webkit-animation-name: threeAnim;
    -moz-animation-name: threeAnim;
    animation-name: threeAnim;

    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    animation-duration: 4s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes threeAnim {
    0% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    12% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    24% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    36% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }

    48% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    60% {
        top: 100%;
        left: 0;
        opacity: 1;
    }

    72% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    84% {
        top: 0;
        left: 0;
        opacity: 1;
    }

    100% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }
}

@-moz-keyframes threeAnim {
    0% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    12% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    24% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    36% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }

    48% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    60% {
        top: 100%;
        left: 0;
        opacity: 1;
    }

    72% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    84% {
        top: 0;
        left: 0;
        opacity: 1;
    }

    100% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }
}

@keyframes threeAnim {
    0% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    12% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    24% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    36% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }

    48% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    60% {
        top: 100%;
        left: 0;
        opacity: 1;
    }

    72% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }

    84% {
        top: 0;
        left: 0;
        opacity: 1;
    }

    100% {
        top: 50%;
        left: 50%;
        opacity: .1;
    }
}

/************* четвертый **************/
.parent_animator.four:before {
    top: 0;
    left: 0;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation-name: fourAnim;
    -moz-animation-name: fourAnim;
    animation-name: fourAnim;

    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes fourAnim {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    75% {
        top: 100%;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@-moz-keyframes fourAnim {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    75% {
        top: 100%;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@keyframes fourAnim {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    75% {
        top: 100%;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
    }
}

/************* пятый **************/
.parent_animator.five {
    -webkit-animation-name: fiveAnim;
    -moz-animation-name: fiveAnim;
    animation-name: fiveAnim;

    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    animation-duration: 4s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.parent_animator.five:before {
    top: 10px;
    left: 50%;
}

@-webkit-keyframes fiveAnim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes fiveAnim {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes fiveAnim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/************* пятый **************/
.parent_animator.six:before {
    margin-top: -15px;
    top: 100%;
    left: 0;
    -webkit-animation-name: sixAnim;
    -moz-animation-name: sixAnim;
    animation-name: sixAnim;

    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    animation-duration: 10s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes sixAnim {
    0% {
        top: 100%;
        left: 0;
    }
    12% {
        left: 0;
    }
    12.5% {
        top: 0;
        left: 12.5%;
    }

    24.5% {
        left: 12.5%;
    }
    25% {
        top: 100%;
        left: 25%;
    }
    37% {
        left: 25%;
    }
    37.5% {
        top: 0;
        left: 37.5%;
    }
    49.5% {
        left: 37.5%;
    }
    50% {
        top: 100%;
        left: 50%;
    }
    62% {
        left: 50%;
    }
    62.5% {
        top: 0;
        left: 62.5%;
    }
    74.5% {
        left: 62.5%;
    }
    75% {
        top: 100%;
        left: 75%;
    }
    87% {
        left: 75%;
    }
    87.5% {
        top: 0;
        left: 87.5%;
    }
    99.5% {
        left: 87.5%;
    }
    100% {
        top: 100%;
        left: 87.5%;
    }
}

@-moz-keyframes sixAnim {
    0% {
        top: 100%;
        left: 0;
    }
    12% {
        left: 0;
    }
    12.5% {
        top: 0;
        left: 12.5%;
    }

    24.5% {
        left: 12.5%;
    }
    25% {
        top: 100%;
        left: 25%;
    }
    37% {
        left: 25%;
    }
    37.5% {
        top: 0;
        left: 37.5%;
    }
    49.5% {
        left: 37.5%;
    }
    50% {
        top: 100%;
        left: 50%;
    }
    62% {
        left: 50%;
    }
    62.5% {
        top: 0;
        left: 62.5%;
    }
    74.5% {
        left: 62.5%;
    }
    75% {
        top: 100%;
        left: 75%;
    }
    87% {
        left: 75%;
    }
    87.5% {
        top: 0;
        left: 87.5%;
    }
    99.5% {
        left: 87.5%;
    }
    100% {
        top: 100%;
        left: 87.5%;
    }
}

@keyframes sixAnim {
    0% {
        top: 100%;
        left: 0;
    }
    12% {
        left: 0;
    }
    12.5% {
        top: 0;
        left: 12.5%;
    }

    24.5% {
        left: 12.5%;
    }
    25% {
        top: 100%;
        left: 25%;
    }
    37% {
        left: 25%;
    }
    37.5% {
        top: 0;
        left: 37.5%;
    }
    49.5% {
        left: 37.5%;
    }
    50% {
        top: 100%;
        left: 50%;
    }
    62% {
        left: 50%;
    }
    62.5% {
        top: 0;
        left: 62.5%;
    }
    74.5% {
        left: 62.5%;
    }
    75% {
        top: 100%;
        left: 75%;
    }
    87% {
        left: 75%;
    }
    87.5% {
        top: 0;
        left: 87.5%;
    }
    99.5% {
        left: 87.5%;
    }
    100% {
        top: 100%;
        left: 87.5%;
    }
}

/************* седьмой **************/
.parent_animator.seven:before {
    top: 100%;
    left: 0;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation-name: sevenAnim;
    -moz-animation-name: sevenAnim;
    animation-name: sevenAnim;

    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes sevenAnim {
    0% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
    25% {
        top: 0;
        left: 0;
        opacity: 1;
    }
    37.5% {
        opacity: .1;
    }
    50% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }
    75% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    87.5% {
        opacity: .1;
    }
    100% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
}

@-moz-keyframes sevenAnim {
    0% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
    25% {
        top: 0;
        left: 0;
        opacity: 1;
    }
    37.5% {
        opacity: .1;
    }
    50% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }
    75% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    87.5% {
        opacity: .1;
    }
    100% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
}

@keyframes sevenAnim {
    0% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
    25% {
        top: 0;
        left: 0;
        opacity: 1;
    }
    37.5% {
        opacity: .1;
    }
    50% {
        top: 100%;
        left: 100%;
        opacity: 1;
    }
    75% {
        top: 0;
        left: 100%;
        opacity: 1;
    }
    87.5% {
        opacity: .1;
    }
    100% {
        top: 100%;
        left: 0;
        opacity: 1;
    }
}

/************* восьмой **************/
.parent_animator.eight:before {
    top: 0;
    left: 0;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation-name: eightAnim;
    -moz-animation-name: eightAnim;
    animation-name: eightAnim;

    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes eightAnim {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 0;
    }
    75% {
        top: 100%;
        left: 100%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@-moz-keyframes eightAnim {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 0;
    }
    75% {
        top: 100%;
        left: 100%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@keyframes eightAnim {
    0% {
        top: 0;
        left: 0;
    }

    25% {
        top: 0;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 0;
    }
    75% {
        top: 100%;
        left: 100%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

/************* девятый **************/
.parent_animator.nine {
    -webkit-animation-name: nineAnim;
    -moz-animation-name: nineAnim;
    animation-name: nineAnim;

    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    animation-duration: 5s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.parent_animator.nine:before {
    top: 10px;
    left: 50%;
    opacity: 0;

    -webkit-animation-name: nineAnimBefore;
    -moz-animation-name: nineAnimBefore;
    animation-name: nineAnimBefore;

    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    animation-duration: 6s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes nineAnim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-1080deg);
    }
}

@-moz-keyframes nineAnim {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(-1080deg);
    }
}

@keyframes nineAnim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-1080deg);
    }
}

@-webkit-keyframes nineAnimBefore {
    0% {
        top: 10px;
        left: 50%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 0;
    }
}

@-moz-keyframes nineAnimBefore {
    0% {
        top: 10px;
        left: 50%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 0;
    }
}

@keyframes nineAnimBefore {
    0% {
        top: 10px;
        left: 50%;
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 50%;
        opacity: 0;
    }
}

/********** десятый *************/

.parent_animator.ten {
    background: green;
    transform: rotateX(60deg);
    -webkit-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
}

.parent_animator.ten:before {
    display: none;
}

.parent_animator.ten .child {
    position: relative;
    width: 200px;
    height: 200px;
    background: grey;
    border-radius: 50%;
    -webkit-animation-name: tenAnim;
    -moz-animation-name: tenAnim;
    animation-name: tenAnim;

    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes tenAnim {
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-moz-keyframes tenAnim {
    0% {
        -moz-transform: rotateZ(0deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@keyframes tenAnim {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.parent_animator.ten .child:before {
    content: '';
    display: block;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -15px;
    margin-left: -15px;

    transform: rotateX(-60deg);
    -webkit-transform: rotateX(-60deg);
    -moz-transform: rotateX(-60deg);

    -webkit-animation-name: tenAnimBefore;
    -moz-animation-name: tenAnimBefore;
    animation-name: tenAnimBefore;

    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes tenAnimBefore {
    0% {
        -webkit-transform: scale(1);
    }
    25% {
        -webkit-transform: scale(0.7);
    }
    50% {
        -webkit-transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes tenAnimBefore {
    0% {
        -moz-transform: scale(1);
    }
    25% {
        -moz-transform: scale(0.7);
    }
    50% {
        -moz-transform: scale(1);
    }
    75% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@keyframes tenAnimBefore {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.7);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/************* одиннадцатый **************/
.parent_animator.eleven:before {
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    opacity: 0.5;
    -webkit-animation-name: elevenAnim;
    animation-name: elevenAnim;

    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes elevenAnim {
    0% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }

    20% {
        -webkit-transform: scale(1.5);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
}

@-moz-keyframes elevenAnim {
    0% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }

    20% {
        -moz-transform: scale(1.5);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(1);
        opacity: 0.5;
    }
}

@keyframes elevenAnim {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    20% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}