.animation{
    opacity:0;
    filter: blur(0);
    transform:translateX(-50%);
    transition: all .9s ease-in-out;
}
.animation[animation="true"]{
    opacity: 1;
    transform: translateX(0);
}
.animation-2{
    opacity:0;
    filter: blur(0);
    transform:translateX(-100%);
    transition: all .9s ease-in-out;
}
.animation-2[animation="true"]{
    opacity: 1;
    transform: translateX(0);
}
.animation-3 {
    opacity:0;
    filter: blur(0);
    transform:translateY(50%);
    transition: all .9s ease-in-out;
}
.animation-3[animation="true"]{
    opacity: 1;
    transform: translateY(0);
}
.animation-4 {
    opacity:0;
    filter: blur(0);
    transform:translateY(-50%);
    transition: all .9s ease-in-out;
}
.animation-4[animation="true"]{
    opacity: 1;
    transform: translateY(0);
}
.animation-5 {
    opacity:0;
    filter: blur(0);
    transform:translateX(100%);
    transition: all .9s ease-in-out;
}
.animation-5[animation="true"]{
    opacity: 1;
    transform: translateX(0);
}