FontAwesome Icon Background Animation Effects HTML CSS Animated Background

This code is rewritten from the video tutorial. Follow the link below to see the author's video and like it if you liked this CSS / HTML
This code may not be accurate with the original from the video.

ICONS

CSS

*{
margin:0;
padding:0;
}
section{
position:relative;
width: 100%;
height:100vh;
background:#111;
display:flex;
flex-direction: column;
overflow:hidden;
}
section .row{
position:relative;
top:-50%;
width:100%;
display:flex;
padding: 10px 0;
white-space:nowrap;
font-size:64px; 
transform: rotate(-30deg);
}
i{
color: rgba(0,0,0,0.5);
transition:1%;
padding:0 5px;
user-select:none;
cursor:default;
}
i:hover{
transition:0%;
color:#0f0;
text-shadow: 0 0 120px #0f0;
}
section .row div {
animation: animate1 80s linear infinite;
animation-delay:-80s;
}
section .row div:nth-child(2) {
animation: animate2 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate1 {
0% {
transform:translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform:translateX(0%);
}
100%{
transform: translateX(-200%);
}
}
-----

section .row:nth-child(even) div {
animation: animate3 80s linear infinite;
animation-delay:-80s;
}
section .row:nth-child(even) div:nth-child(2) {
animation: animate4 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate3 {
0% {
transform:translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
@keyframes animate4 {
0% {
transform:translateX(-200%);
}
100%{
transform: translateX(0%);
}
}

HTML/CSS

Untitled Document