.an{
    width: 200px;
    height: 200px;
    background: black;position: absolute;top: 25%;bottom: 0%;left: 0%;right: 0%;animation: obj 18s linear infinite;z-index: 1000;opacity: 0.4;
}
.an1{
    width: 200px;
    height: 200px;
    background: black;position: absolute;top: 0%;bottom: 12%;left: 0%;right: 5%;animation: obj1 15s linear infinite;z-index: 1000;opacity: 0.4;
}
.an2{
    width: 90px;
    height: 90px;
    background: black;position: absolute;top: 50%;bottom: 0%;left: 35%;right: 0%;animation: obj2 17s linear infinite;z-index: 1000;opacity: 0.4;
}
.an3{
    width: 180px;
    height: 180px;
    background: black;position: absolute;top: 50%;bottom: 50%;left: 50%;right: 50%;animation: obj3 15s linear infinite;z-index: 1000;opacity: 0.4;
}
.an4{
    width: 100px;
    height: 100px;
    background: black;position: absolute;top: 50%;bottom: 0%;left: 0%;right: 20%;animation: obj4 14s linear infinite;z-index: 1000;opacity: 0.4;
}
.an5{
    width: 120px;
    height: 120px;
    background: black;position: absolute;top: 0%;right: 0%;animation: obj5 12s linear infinite;z-index: 1000;opacity: 0.4;
}
.an6{
    width: 165px;
    height:165px;
    background: rgb(72, 255, 0); position: absolute; top: 5%; right: 30%;  animation: obj6 19s linear infinite;z-index: 1000;opacity: 0.4;
}
.animatsiyabolim2{
    display: block  ;
}
.animatsiyabolim1{
    display: none;
}
@keyframes obj {
    10%{
        top: 20%;
        right: 55%;
        transform:rotateZ(80deg);
    }
    20%{
        bottom: 55%;
        left: 60%;
        transform: rotateZ(45deg);
    }
    30%{
        top: 75%;
        right: 75%;
        background: blue;
    }
}
@keyframes obj1 {
    10%{
        top: 50%;
        right: 15%;
        transform:rotateZ(80deg);
    }
    20%{
        bottom: 85%;
        left: 20%;
        transform: rotateZ(45deg);
    }
    30%{
        top: 15%;
        right: 25%;
        background: red;
    }
}@keyframes obj2 {
    10%{
        top: 50%;
        right: 15%;
        transform:rotateZ(40deg);
    }
    20%{
        bottom: 45%;
        left: 80%;
        transform: rotateZ(45deg);
    }
    30%{
        top: 9%;
        right: 35%;
        background: yellow;
    }
}@keyframes obj3 {
    10%{
        top: 5%;
        left: 12%;
        transform:rotateZ(120deg);
    }
    30%{
        top: 95%;
        right: 75%;
        background: rgb(0, 229, 255);
    }
}@keyframes obj4 {
    /* 10%{
        top: 20%;
        right: 55%;
        transform:rotateZ(80deg);
    }
    20%{
        bottom: 55%;
        left: 80%;
        transform: rotateZ(45deg);
    } */
    30%{
        top: 15%;
        right: 75%;
        background: rgb(0, 255, 4);
    }
}@keyframes obj5 {
    10%{
        right: 50%;
        bottom: 80%;
        transform:rotateZ(80deg);
    }
    /* 20%{
        bottom: 55%;
        left: 80%;
        transform: rotateZ(45deg);
    } */
    30%{
        top: 75%;
        right: 75%;
        background: rgb(255, 102, 0);
    }
} 
@keyframes obj6 {
    10%{
        top: 20%;
        right: 55%;
        transform:rotateZ(80deg);
    }
    50%{ 
        left: 80%;
        transform: rotateZ(45deg);
    }
    60%{
        top: 5%;
        right: 5%;
        background: blue;
        transform: scaleX(180deg);
    }
} 

/* ----------------------------------------------------------------------------------------------------------------------------- */
.any{
    width: 110px;
    height: 110px;
    background: black;position: absolute; bottom: 5%; left: 50%;animation: objy 8s linear infinite;z-index: 1000;opacity: 0.4;
}
.any1{
    width: 80px;
    height: 80px;
    background: black;position: absolute; bottom: 45%;left: 50%; animation: objy1 9s linear infinite;z-index: 1000;opacity: 0.4;
}
.any2{
    width: 90px;
    height: 90px;
    background: black;position: absolute; bottom: 25%; left: 50%; animation: objy2 7s linear infinite;z-index: 1000;opacity: 0.4;
}
.any3{
    width: 90px;
    height: 90px;
    background: black;position: absolute; bottom: 80%;left: 50%; animation: objy3 7s linear infinite;z-index: 1000;opacity: 0.4;
}
.any4{
    width: 100px;
    height: 100px;
    background: black; position: absolute; bottom: 100%; right: 5%; animation: objy4 8s linear infinite;z-index: 1000;opacity: 0.4;
}


/* -- */
@keyframes objy {
    10%{
        top: 5%;
        left: 5%;
        opacity: 0.3;
    }
    30%{
        top: 80%;
        left: 15%;
        background: blue;
    }
    100%{
        transform:rotateZ(80deg);
    }
}
@keyframes objy1 {
    10%{
        top: 5%;
        right: 45%;
        transform:rotateZ(80deg);
    }
    20%{
        bottom: 8%;
        left: 5%;
        transform: rotateZ(45deg);
    }
    30%{
        bottom: 45%;
        background: red;
    }
}@keyframes objy2 {
    10%{
        bottom: 75%;
        left: 55%;
        transform:rotateZ(40deg);
    }
    20%{
        bottom: 5%;
        left: 15%;
        transform: rotateZ(45deg);
    }
    30%{
        bottom: 25%;
        background: yellow;
    }
}@keyframes objy3 {
    10%{
        bottom: 25%;
        left: 15%;
        transform:rotateZ(120deg);
    }
    20%{
        bottom: 85%;
        left: 20%;
        transform: rotateZ(45deg);
    }
    30%{
        background: rgb(0, 229, 255);
    }
}@keyframes objy4 {
    10%{
        right: 15%;
        bottom: 20%;
    }
    20%{
        bottom: 80%;
        transform: rotateZ(45deg);
    }
    30%{
        background: rgb(0, 255, 4);
    }
}
@media (min-width: 1000px) {
    .animatsiyabolim2{
        display: none  ;
}
    .animatsiyabolim1{
        display: block;
    }
}