Question

我正在尝试创建一个包含两个动画元素，一个前景对象和一个背景的动画。我让它们都包含在div中，并希望隐藏前景元素溢出容器div，但overflow:hidden;没有按预期工作。这不适用于动画吗？

在此处查看 - ＆gt; 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

没关系！我的z-index让它脱颖而出。我知道这很简单，我不知道。

CSS动画和溢出：隐藏;

1 个答案: