Бесконечная анимированная фоновая картинка для сайта

<section class="container">  
  <div class="wrap">  
  <div class="pattern"></div>  
  </div>  
</section>

.container {  
  background: #222;  
  height: 100%;  
  margin: 0 auto;  
  overflow: hidden;  
  perspective: 1200px;  
}  
.container:after {  
  box-shadow: inset 5px 5px 80px rgba(0,0,0,.8);  
  content: '';  
  position: absolute;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  z-index: 10;  
}  
.wrap {  
  position: absolute;  
  top: -60%;  
  left: -10%;  
  height: 300%;  
  width: 200%;  
  transform: rotateX(20deg) rotateY(40deg) rotateZ(-20deg);  
  z-index: 5;  
}  
.pattern {  
  background-size: 500px;  
  position: absolute;  
  top: 0;  
  left: 0;  
  height: 100%;  
  width: 400%;  
  animation: scroll linear 20s infinite;  
}  
.pattern {  
  background-image: url('img/g.gif');  
}  
@keyframes scroll {  
  from {  
  transform: translate3d(0, 0, 0);  
  }  
  to {  
  transform: translate3d(-4000px, 0, 0);  
  }  
}  
.credit {  
  color: #fff;  
  font: 12px/12px sans-serif;  
  position: absolute;  
  text-align: center;  
  bottom: 10px;  
  width: 100%;  
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);  
  a {  
  color: #eee;  
  text-decoration: none;  
  }  
}