.transition1{
    position: fixed;
    top: 100%;
    left: 0;
    bottom:0;
    height: 100%;
    right: 0;
    z-index: 100;
    background-color: white;
    transition: ease-out ;
    -webkit-transition-duration: 0.5s;
    transition-duration:  0.5s; ;

}

.is-active{
    top: 0; 
    transition: ease-out ;
    -webkit-transition-duration: 0.5s;
    transition-duration:  0.5s; ;

}




@keyframes move {
0%   { transform: scale(1)   translate(10px, -30px); }
38%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
40%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
78%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
80%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
100% { transform: scale(1)   translate(10px, -30px); }
}