.fog {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 400px;
overflow: hidden;
background: url("background.jpg") center center;
background-size: cover;
}
.fog::before,
.fog::after,
.fog div::before,
.fog div::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: repeat-x;
}
.fog div::before,
.fog div::after {
left: 100%;
}
.fog::before,
.fog div::before {
background-image: url("fog-1.png");
animation: fogmove 20s linear 0s infinite;
}
.fog::after,
.fog div::after {
background-image: url("fog-2.png");
animation: fogmove 10s linear 0s infinite;
}
@keyframes fogmove {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}