* {

}


@keyframes blur-in-out {
0%, 100% {
filter: blur(0px);

opacity: 1;
}
25% {
filter: blur(2,5px);
 opacity: 0.5;
}
50% {

filter: blur(5px);
 opacity: 0;
}
25% {
filter: blur(2,5px);
 opacity: 0.5;
}
100% {

    filter: blur(0px);
    opacity: 1;
}
}


@-webkit-keyframes blur {
    100%, 0% {
        filter: blur(5px);

        opacity: 0;
    }
    25% {
        filter: blur(2.5px);
        opacity: 0.5;
    }
    50% {
        filter: blur(0px);

        opacity: 0.9;
    }
    75% {
        filter: blur(2.5px);
        opacity: 0.5;
    }
    100% {
        filter: blur(5px);

        opacity: 0;
    }
}

@-webkit-keyframes blur1 {
    100%, 0% {
        filter: blur(0px);

        opacity: 1;
    }
    25% {
        filter: blur(2,5px);
        opacity: 0;
    }
    50% {
        filter: blur(0px);

        opacity: 1;
    }
    75% {
        filter: blur(2,5px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);

        opacity: 1;
    }
}





div{
span:nth-child(1){
    animation: blur-in-out 2.75s ease-in-out infinite

}

span:nth-child(2){
    animation: blur-in-out 4s ease-in-out infinite

}

span:nth-child(3){
    animation: blur-in-out 3.75s ease-in-out infinite

}

span:nth-child(4){
    animation: blur-in-out 3s ease-in-out infinite

}
}

div1{
span:nth-child(1){
    animation: blur-in-out 8s ease-in-out infinite

}

}


div2 {
span:nth-child(1){
    animation: blur-in-out 4s ease-in-out infinite

}

span:nth-child(2){
    animation: blur-in-out 5s ease-in-out infinite

}
}




div3{
span:nth-child(1){
    animation: blur-in-out 3.5s ease-in-out infinite

}

span:nth-child(2){
    animation: blur-in-out 4s ease-in-out infinite

}

span:nth-child(3){
    animation: blur-in-out 3.75s ease-in-out infinite

}


}


body{
    background-color: ivory;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    font-family: verdana;
    display: flex;
    flex-direction: column;
    justify-content: center;
   text-indent: 300px;
    line-height: 1px;
    font-size: large;
}