.line-anim {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100vh;
transition: 750ms ease;
z-index:2;
}
.line-anim .bar {
position: fixed;
top: 0;
width: 1px;
height: 100%;
opacity: 0.7;
background-color:rgba(0,0,0,.15);
transform: skewX(-35deg);
transform-origin: 0 0;
}
.line-anim .bar:nth-child(1) {
left: 30%;
animation: lineBar1 55s ease 0s infinite forwards;
}
.line-anim .bar:nth-child(2) {
left: 43%;
animation: lineBar2 45s ease 0.3s infinite forwards;
}
.line-anim .bar:nth-child(3) {
left: 8%;
animation: lineBar3 82s ease 0s infinite forwards;
}
.line-anim .bar:nth-child(4) {
left: 78%;
animation: lineBar4 36s ease 0.1s infinite forwards;
}
.line-anim .bar:nth-child(5) {
left: 94%;
animation: lineBar5 95s ease 0s infinite forwards;
}

@keyframes lineBar1 {
0% {
left: 30%;
}
32% {
left: 120%;
}
69% {
left: -15%;
}
100% {
left: 30%;
}
}
@keyframes lineBar2 {
0% {
left: 43%;
}
46% {
left: 94%;
}
78% {
left: 23%;
}
100% {
left: 43%;
}
}
@keyframes lineBar3 {
0% {
left: 8%;
}
58% {
left: 74%;
}
83% {
left: -5%;
}
100% {
left: 8%;
}
}
@keyframes lineBar4 {
0% {
left: 78%;
}
45% {
left: 120%;
}
88% {
left: 20%;
}
100% {
left: 78%;
}
}
@keyframes lineBar5 {
0% {
left: 94%;
}
35% {
left: 40%;
}
55% {
left: 110%;
}
100% {
left: 98%;
}
}