Студия интерактивного искусства полного цикла Александра Козлова и Алексея Образцова

.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); } }