title: CSS animated background not moving
body: <p>I've been creating an animated background, where there's a plain background colour, and then five objects which move across at different speeds and positions. I've got it to work in files on its own with no other code, but when I've placed it into my main document, it won't work as it does when it's on its own.</p>
  
  <p>I have an xsl document with the html etc in, and then a separate document with the css in. </p>
  
  <p>The xsl, with code not relevant to this taken out is...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;  
          &lt;title&gt;Blog&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="blog.css" /&gt;
          &lt;script src ="JavaScript.js"&gt; &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;div class="star1"&gt;&lt;/div&gt;
      &lt;div class="star2"&gt;&lt;/div&gt;
      &lt;div class="star3"&gt;&lt;/div&gt;
      &lt;div class="star4"&gt;&lt;/div&gt;
      &lt;div class="star5"&gt;&lt;/div&gt;
  
      &lt;body&gt;
      ...
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The divs are each object which is moving across, which are working in the separate document, and I have a feeling my problem is to do with positioning of everything, but I've tried different variations of relative and absolute positioning and neither seem to be working as I hope. In the below, each star is defined as set in the xsl, but instead of moving as they do when out of it, they're just sitting there in a cluster not moving.</p>
  
  <pre><code>html 
  { 
      padding: 100px 0;
  }
  
  body
  {
      overflow: hidden;
      background: #0A0F1A no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      position: fixed;
  }
  
  /*background moved and forms here*/
  .star1 
  {
      width: 150px; 
      height: 150px;
      background: url(Images/Star1.png); 
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
  
  
      border-radius: 200px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
  
      -webkit-animation: movestar 30s linear infinite;
      -moz-animation: movestar 30s linear infinite;
      -o-animation: movestar 30s linear infinite;
  }
  
  .star2
  {
      width: 120px; 
      height: 120px;
      background: url(Images/Star2.png); 
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 400px; 
  
      border-radius: 200px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
  
      -webkit-animation: movestar 50s linear infinite;
      -moz-animation: movestar 50s linear infinite;
      -o-animation: movestar 50s linear infinite;
  }
  
  .star3
  {
      width: 100px; 
      height: 100px;
      background: url(Images/Star3.png); 
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: -400px;
  
      border-radius: 200px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
  
      -webkit-animation: movestar 20s linear infinite;
      -moz-animation: movestar 20s linear infinite;
      -o-animation: movestar 20s linear infinite;
  }
  
  .star4
  {
      width: 80px; 
      height: 80px;
      background: url(Images/Star4.png); 
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: -200px; 
  
      border-radius: 200px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
  
      -webkit-animation: movestar 10s linear infinite;
      -moz-animation: movestar 10s linear infinite;
      -o-animation: movestar 10s linear infinite;
  }
  
  .star5
  {
      width: 60px; 
      height: 60px;
      background: url(Images/Star5.png); 
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 100px; 
  
      border-radius: 200px;
      -moz-border-radius: 200px;
      -webkit-border-radius: 200px;
  
      -webkit-animation: movestar 30s linear infinite;
      -moz-animation: movestar 30s linear infinite;
      -o-animation: movestar 30s linear infinite;
  }
  
  @-webkit-keyframes movestar 
  {
      0% {margin-left: 1000px;}
      100% {margin-left: -1000px;}
  }
  @-moz-keyframes movestar 
  {
      0% {margin-left: 1000px;}
      100% {margin-left: -1000px;}
  }
  @-o-keyframes movestar 
  {
      0% {margin-left: 1000px;}
      100% {margin-left: -1000px;}
  }
  </code></pre>
  
  <p>Any help as to why it's not animated like it was before would be hugely appreciated as I've ran out of ideas of how to try fix it. Thanks.</p>