.animation_image{
    width: 34%;
    height:290px;
    position: absolute;
    border-radius:30px;
    filter: brightness(110%) blur(5px);
    border: solid black 5px;
    margin-left: 340px;
    animation-name: imageAnimation;
    animation-duration: 5s;


}

@keyframes imageAnimation{
    20% {
    width: 40%;
    height:290px;
    position: absolute;
    border-radius:10px;
    filter: brightness(50%) blur(4px);
    border: solid black 5px;
    margin-left: 310px;
    }

    50% {
    width: 45%;
    height:310px;
    position: absolute;
    border-radius:5px;
    filter: brightness(70%) blur(3px);
    border: solid black 5px;
    margin-left: 290px;
    }
    
    70%{
    width: 50%;
    height:330px;
    position: absolute;
    border-radius:5px;
    filter: brightness(90%) blur(2px);
    border: solid black 5px;
    margin-left: 270px;
    }

    
    100% {
    width: 55%;
    height:350px;
    position:absolute;
    border-radius:1px;
    border: solid black 5px;
    filter:none;
    margin-left:250px ;
    }
}
.animation2{
     width: 34%;
    height:290px;
    filter: brightness(110%) blur(5px);
    border: solid black 5px;
    animation-duration: 3s;
    margin-top:35%;
    animation-name: animation22;
    position: absolute;
    margin-left: 325px;
    animation-iteration-count: 3;
    animation-direction: alternate-reverse;
}
@keyframes animation22 {
    0%{
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
         border-radius: 0%;
    }
    25%{
         box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
        border-radius: 50%;
        transform: rotate(180deg);
    }
    50%{
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
          border-radius: 100%;
          transform: rotate(180deg);
    }
    70%{
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
        border-radius: 50%;
        transform: rotate(180deg);
    }
    100%{
        box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
        border-radius: 0%;
        transform: rotate(180deg);
        }
}