title: CSS animation and overflow:hidden;
body: <p>I'm trying to create an animation with two animated elements, a foreground object and a background. I have them both contained in a div and want to hide the overflow of the foreground element beyond the container div, but <code>overflow:hidden;</code> isn't working as expected. Does this just not work on animations?</p>
  
  <p>See it here --> <a href="http://verybradthings.com/chopper/index.html" rel="nofollow">http://verybradthings.com/chopper/index.html</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="scene-container"&gt;
          &lt;img src="img/chopper.svg" id="chopper"/&gt;
          &lt;div id="skyline"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container{
      display: block;
      width: 600px;
      margin: 0 auto;
  }
  .scene-container{
      display: inline-block;
      height: 175px;
      width: 231px;
      overflow: hidden;   
  }
  #chopper{
      display: inline-block;
      position: absolute;
      z-index: 1;
      -webkit-animation: chopper-scale 3s infinite linear;
  }
  #skyline{
      display: inline-block;
      height: 174px;
      width: 230px;
      outline: 1px blue solid;
      background: url(img/skyline.svg);
      background-repeat: repeat-x;
      -webkit-animation: move 5s infinite linear, scale 5s infinite ease;
  }
  
  /*Skyline scale and move*/
  @-webkit-keyframes scale{
      0%   {-webkit-transform:scale(1);}
      50%  {-webkit-transform:scale(1.5);}
      100% {-webkit-transform:scale(1);}
  }
  @-webkit-keyframes move{
      0%    {background-position: 0 0;}
      50%   {background-position: 115px 0;}
      100%  {background-position: 230px 0;}
  }
  /* Chopper scale */
  @-webkit-keyframes chopper-scale{
      0%   {-webkit-transform:scale(1);}
      50%  {-webkit-transform:scale(1.5);}
      100% {-webkit-transform:scale(1);}
  }
  </code></pre>