@keyframes animation1{
0%{transform: translate(-20em, 80em)}
100%{transform: none}
}
@keyframes animation2{
    0%{transform: translate(-50em, -20em)}
    100%{transform: none}
}
@keyframes animation3{
    0%{transform: translate(-20em, -60em)}
    100%{transform: none}
}
@keyframes animation4{
    0%{transform: translate(-65em, 0px)}
    100%{transform: none}
}
@keyframes animation5{
    0%{transform: translate(15em, -80em)}
    100%{transform: none}
}
@keyframes animation6{
    0%{transform: translate(-40em, 50em)}
    100%{transform: none}
}
@keyframes menufade{
    0%{opacity: 0;}
    80%{opacity: 0;}
    100%{opacity: 1;}
}

.panel1{
    width: 500px;
    height: 90px;
    animation: animation1;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    background-position:0 0;   
}
.panel2{
    width: 350px;
    height: 70px;
    animation: animation2;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    background-position:0 -90px;
}
.panel3{
    width: 350px;
    height: 60px;
    animation: animation3;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    background-position:0 -160px;
}
.panel4{
    width: 500px;
    height: 80px;
    animation: animation4;
    animation-duration: 1s;
    animation-timing-function: ease-out; 
    background-position:0 -220px;
}
.panel5{
    width: 500px;
    height: 100px;
    animation: animation5;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    background-position:0 -300px;
}
.panel6{
    height: 130px;
    width: 150px;
    animation: animation6;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    background-position: 150px -90px;
    float: right;
}
.menu{
    animation: menufade 1.2s ease-out;
}