1

我正在尝试创建一个包含两个动画元素、一个前景对象和一个背景的动画。我将它们都包含在一个 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);}
}
4

1 回答 1

3

没关系！我的 z-index 搞砸了。我知道我错过了一些简单的事情。

于 2013-08-22T23:06:55.640 回答