CSS-анимация и переполнение: скрытые;

Question

Я пытаюсь создать анимацию с двумя анимированными элементами, передним объектом и фоном. У меня есть оба они содержатся в div и хотят скрыть переполнение элемента переднего плана за пределами контейнера div, но overflow:hidden; работает не так, как ожидалось. Это просто не работает на анимации?

Посмотри здесь ->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);} 
} 

Answer 1

Nevermind! Мой z-index выбрасывал его из-под удара. Я знал, что это было что-то простое, что мне не хватало.