.tranceform1 {
    animation: elm1 20s infinite;
}


@keyframes elm1 {
    0% {
        transform: translateY(10px);
       
    }

    25% {
        transform: translateY(-10px);
      
    }

    50% {
        transform: translateY(10px);
  
    }
    75% {
        transform: translateY(-10px);
     
    }

    100% {
        transform: translateY(10px);
       
    }
}
.tranceform2 {
    animation: elm2 20s infinite;
}


@keyframes elm2 {
    0% {
        transform: translateY(10px);
     
    }

    25% {
        transform: translateX(10px);
    
    }

    50% {
        transform: translateY(-10px);
 
    }
    75% {
        transform: translateX(-10px);
  
    }

    100% {
        transform: translateY(10px);
     
    }
}
.tranceform3 {
    animation: elm3 20s infinite;
}


@keyframes elm3 {
    0% {
        transform: translateY(-10px);

    }

    25% {
        transform: translateX(-10px);

    }

    50% {
        transform: translateY(-10px);

    }

    75% {
        transform: translateX(-10px);

    }

    100% {
        transform: translateY(-10px);
     
    }
}


.unecircle1 {
    border: 3px solid gray;
    animation: uneune1  10s linear infinite;  
    width: 230px;
    height: 230px;
    margin: 15px auto;
}

@keyframes uneune1 {

    0% {
        border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;
    }

    25% {
        border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%;
    }

    50% {
        border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%;
    }

    75% {
        border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%;
    }

    100% {
        border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;
    }
}
.unecircle2 {
    border: 3px solid gray;
    animation: uneune2 10s linear infinite; 
    width: 230px;
    height: 230px;
    margin: 15px;
}

@keyframes uneune2 {

    0% {
        border-radius: 60% 50% 50% 40% / 50% 60% 40% 50%;
    }

    25% {
        border-radius: 50% 60% 60% 50% / 60% 40% 50% 60%;
    }

    50% {
        border-radius: 40% 40% 50% 60% / 50% 50% 40% 40%;
    }

    75% {
        border-radius: 50% 60% 60% 50% / 60% 50% 50% 60%;
    }

    100% {
        border-radius: 60% 50% 50% 40% / 50% 60% 40% 50%;
    }
}

.unecircle3 {
    border: 3px solid gray;
    animation: uneune3 10s linear infinite; 
    width: 230px;
    height: 230px;
    margin: 15px ;
}

@keyframes uneune3 {

    0% {
        border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;
    }

    25% {
        border-radius: 70% 60% 60% 70% / 70% 80% 40% 60%;
    }

    50% {
        border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%;
    }

    75% {
        border-radius: 70% 60% 40% 70% / 70% 50% 80% 40%;
    }

    100% {
        border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;
    }
}