.slider .slide.active{
    animation: alphaonly .5s 0ms 1 ease-in;
    transition: all 1s ease-in;
    display: block;
}

@keyframes alpha {
    0%{
        transform: translateX(-100px);
        opacity: 0;
       
    }
    50%{
        transform: translateX(-50px);
        opacity: .5;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes alphaonly {
    0%{
        opacity: 0;
    }
    50%{
        opacity: .5;
    }
    100%{
        opacity: 1;
       
    }
}
.box{
    animation:animate 5s ease-in-out infinite;
    transition: all 1s ease-in-out;
}

@keyframes animate {
    0%{
        border-radius: 60% 40% 30%  70%/60% 30% 70% 40%;

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

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

    }

}

@keyframes fromLeft {
    0%{
        transform: translateX(-200px) rotate(-10deg);
        opacity: 0;
        
    }
    20%{
        transform: translateX(-150px) rotate(-8deg);
        opacity: .2;
    }
    40%{
        transform: translateX(-100px) rotate(-6deg);
        opacity: .4;
    }
    60%{
        transform: translateX(-50px) rotate(-4deg);
        opacity: .6;
    }
    100%{
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
    
}

@keyframes fromRight {
    0%{
        transform: translateX(200px) rotate(10deg);
        opacity: 0;
    }
    20%{
        transform: translateX(150px) rotate(8deg);
        opacity: .2;
    }
    40%{
        transform: translateX(100px) rotate(6deg);
        opacity: .4;
    }
    60%{
        transform: translateX(50px) rotate(3deg);
        opacity: .6;
    }
    100%{
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
    
}