CSS animation and overflow:hidden;

CSS animation and overflow:hidden;

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
"overflow:hidden;" isn't working as expected. Does this just not work on
animations?
See it here --> http://verybradthings.com/chopper/index.html
HTML
<div class="container">
<div class="scene-container">
<img src="img/chopper.svg" id="chopper"/>
<div id="skyline"></div>
</div>
</div>
CSS
.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);}
}