.subanimaion__wrap {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 350px;
    top: 340px;

}

.subanimaion__wrap:before,
.subanimaion__wrap:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}


.subanimaion__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    border: 5px outset #fff;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

.dance__music {
    position: relative;
    height: 10vmin;
    width: auto;
}

.dance__music span {
    display: inline-block;
    font-size: 3em;
    margin-left: 2vmin;
    color: #000;
}

.dance__music span:after {
    width: 2vmin;
    height: 2vmin;
    background-color: red;
}

.dance__music span:nth-child(1) {
    animation: first 4s linear infinite;
}

.dance__music span:nth-child(2) {
    animation: second 4s linear infinite;
}

.dance__music span:nth-child(3) {
    animation: first 4s linear infinite;
}

.dance__music span:nth-child(4) {
    animation: second 4s linear infinite;
}

@keyframes first {

    0%,
    15%,
    30%,
    45%,
    60%,
    75%,
    100% {
        transform: rotate(0deg) translateY(6vmin);
    }

    5%,
    20%,
    35%,
    50%,
    65%,
    80%,
    95% {
        transform: rotate(15deg) translateY(-6vmin);
    }

    10%,
    25%,
    40%,
    55%,
    70%,
    85%,
    90% {
        transform: rotate(-15deg) translateY(6vmin);
    }
}

@keyframes second {

    0%,
    15%,
    30%,
    45%,
    60%,
    75%,
    100% {
        transform: rotate(0deg) translateY(-6mvin);
    }

    5%,
    20%,
    35%,
    50%,
    65%,
    80%,
    95% {
        transform: rotate(15deg) translateY(6vmin);
    }

    10%,
    25%,
    40%,
    55%,
    70%,
    85%,
    90% {
        transform: rotate(-15deg) translateY(-6vmin);
    }
}