CSS
html,body {
width: 100%;
height: 100%;
overflow: hidden;
background: #403A3E;
background: linear-gradient(to left, #403A3E , #BE5869);
}
.nav {
margin-top: 100px;
}
.info {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-transform: uppercase;
}
.el {
width: 100px;
height: 26px;
padding: 18px 100px;
margin: 15px 0;
left: -288px;
font-family: 'Oswald', sans-serif;
font-size: 24px;
background: #34495e;
position: relative;
list-style: none;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.5),inset 0 0 2px rgba(255,255,255,0.1);
cursor: pointer;
}
.el:hover {
left: -80px;
list-style: none;
transition: all .2s ease-in-out;
}
.el:nth-child(1) {
animation: enterScreen 1s ease-in-out;
}
.el:nth-child(2) {
animation: enterScreen 1.1s ease-in-out;
}
.el:nth-child(3) {
animation: enterScreen 1.2s ease-in-out;
}
.el:nth-child(4) {
animation: enterScreen 1.3s ease-in-out;
}
.el:after {
width: 36px;
height: 36px;
position: absolute;
right: 10px;
top: 18px;
}
@keyframes enterScreen {
0% { left: -600px; }
44% { left: -220px; }
100% { left: -280px; }
}
