CSS动画和溢出:隐藏；

Question

我试图用两个动画元素来创建一个动画，一个前景对象和一个背景。我将它们都包含在div中，并希望将前台元素的溢出隐藏在容器div之外，但是overflow:hidden;没有像预期的那样工作。这不适用于动画吗？

看这里--> http://verybradthings.com/chopper/index.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

不介意！我的z指数把它搞得乱七八糟。我就知道我错过了一些很简单的东西。