.lines { position: absolute; top: 0; left: 0; right: 0; height: 100%; margin: auto; width: 90vw; } .lines .line { position: absolute; width: 1px; height: 100%; top: 0; left: 50%; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .lines .line::after { content: ""; display: block; position: absolute; height: 15vh; width: 100%; top: -50%; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%); -webkit-animation: run 7s 0s infinite; animation: run 7s 0s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); } .lines .line:nth-child(1) { margin-left: -25%; } .lines .line:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .lines .line:nth-child(3) { margin-left: 25%; } .lines .line:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } @-webkit-keyframes run { 0% { top: -50%; } 100% { top: 110%; } } @keyframes run { 0% { top: -50%; } 100% { top: 110%; } }