@keyframes wolkAnim {
  /* Currently every huisje is at most 50% the size of the #main element
   * (which is currently 800x800 pixels), so if we let it start at
   * -400px, it will not appear on the screen suddenly.  But it would be
   * better to let it start at exactly minus the width… */
  from { left: -400px; }
  to   { left:  800px; }
}

/* Same as above; compatibility with Chrome */
@-webkit-keyframes wolkAnim {
  from { left: -400px; }
  to   { left:  800px; }
}

#main {
  width: 800px;
  height: 800px;
  position: relative;
  overflow: hidden;
  background: #EEE;
}

.huisje {
  position: absolute;

  animation-name: wolkAnim;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name: wolkAnim;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
