title: Background color changing tiles
body: <p>This is more of a theoretical question with a few code snipets. I'd like to create a website with a background full of tiles that change constantly in color and shape. A good example are the Windows Phone 8 tiles. Of course later I'd like to create a more complex effect, but I'd like to know how you would go about changing every 50x50px square individualy, for example.</p>
  
  <p>This is a code snipet for changing the background color constantly.</p>
  
  <pre><code>.animate {
      height: 200px;
      width: 400px;
      border: 1px solid #000;
      -webkit-animation: animate_bg 5s;
      animation: animate_bg 5s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
  }
  
  @keyframes animate_bg {
      0%   {background:red;}
      50%  {background:green;}
      100% {background:blue;}
  }
  
  @keyframes animate_bg {
      0%   {background:red;}
      50%  {background:green;}
      100% {background:blue;}
  }
  
  @-webkit-keyframes animate_bg {
      0%   {background:red;}
      50%  {background:green;}
      100% {background:blue;}
  }
  </code></pre>
  
  <p>Now do I need to create this effect again and again and again until it fills up my page, or is there a better way of doing so? Maybe there's a 'random repeat' function similar to bg-repeat? Note: Tiles should be randomized in starting color.</p>
  
  <p>Thank you!</p>