@keyframes anim1 {
  0%{margin-left: 50%;opacity: 0;}
  100%{margin-left: 0%;opacity:1;}
}@keyframes anim2 {
  0%{margin-right: 50%;opacity: 0;}
  100%{margin-right: 0%;opacity:1;}
}@keyframes rot {
  0%{transform: rotate(0deg);opacity: 0;}
  100%{transform: rotate(-360deg);opacity: 1;}
}@keyframes vertical {
  0%{height: 100vh;}
  100%{height: 0vh;}
}
.animation{
    position: fixed;
    vertical-align: top;
    display: inline-block;
    margin: auto;
    width: 100%;
    height: 100vh;
    background-color:#28337D;
    text-align: center;
    overflow: hidden;
    animation: vertical 3s ease 0.5s  alternate forwards;
    animation-delay: 4s;
    z-index: 10;
}
.p1{
    opacity: 0;
    margin-top: 40vh;
    height: 150px;
    vertical-align: top;
    animation: anim1 1.5s ease 0.5s  alternate forwards;
}
.p2{
    opacity: 0;
    height: 150px;
    vertical-align: top;
    margin-top: -150px;
    animation: anim2 1.5s ease 0.5s  alternate forwards;
}
.p3{
    opacity: 0;
    height: 150px;
    vertical-align: top;
    margin-top: -169px;
    animation: rot 1.5s ease 0.5s  alternate forwards;
    animation-delay: 2s;   
}