Question

尝试制作一个动画，其中“底层”上有一个图像＆＃39;它从左到右平移，顶部是另一个包含透明区域的图像。这样可以创造一种掩蔽效果。

由于某些原因，当应用的div在容器/包装器div中时，此动画不会显示。另一方面..当设置div结构之外，所有似乎都工作正常，所以我的印象是它必须与我的div的定位有关...

任何可以协助这位新手再次回到正轨的人都会？

jsfiddle：http://jsfiddle.net/hermanlens/BQPK5/

我的html-markup：

<body>
<div id="container">
    <div id="pagina">
        <div id="menu">
        <ul>
            <li><a href="#"><i class="fa-anchor"></i><br /><span class="menutekst">Welkom</span></a></li>
            <li><a href="#"><i class="fa-users"></i><br /><span class="menutekst">Team</span></a></li>
            <li><a href="#"><i class="fa-cogs"></i><br /><span class="menutekst">Diensten</span></a></li>
            <li><a href="#"><i class="fa-bullhorn"></i><br /><span class="menutekst">Nieuws</span></a></li>
            <li><a href="#"><i class="fa-phone"></i><br /><span class="menutekst">Contact</span></a></li>
        </ul>
        </div>
        <div id="banner">
    <div id="box">
        <div id="panning"></div>
    </div>
</div>
        <div id="inhoud">
            Dit is de inhoud
        </div>
    </div>
    <div id="zijbalk">Dit is de zijbalk</div>
    <div id="footer">Dit is de footer</div>
    </div>

    <div id="banner">
    <div id="box">
        <div id="panning"></div>
    </div>
</div>

我的CSS ......

    /* --------- Begin Imports ---------*/
@import 'reset.css';
@import 'font-awesome.css';
/* --------- Einde Imports ---------*/


/* --------- Begin Algemeen ---------*/
body{
    font-size: 14px;
    background-color: #fafafa;
    width: 960px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
div#container{
    background-color: #fafafa;

}
/* --------- Einde Algemeen ---------*/

/* --------- Begin Pagina div ---------*/
div#pagina{
    /*background-color: orange;*/
    width: 760px;
    float: left;

}

/* --------- Begin menu ---------*/
div#menu{
    width:760px;
    margin-left: auto;
    margin-right: auto;
    background-color: #3194F7;
    font-style:normal;
    text-align:center;
    border-radius: 25px;
    -webkit-border-radius: 25px;
}
div#menu ul{
    font-size: 1em;
}
div#menu li{
    line-height: 1.1em;
    display: inline-block;
}
div#menu i{
    font-family: 'fontawesome', Helvetica, sans-serif;
    font-size: 1.6em;
    font-style:normal;
}
div#menu a{
    display:block;
    text-decoration: none;
    color:#fafafa;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 40px;
    padding-right: 40px;
}
div#menu a:hover{
    background-color:#3194f7; 
    color:#0000ff;
    box-shadow: 5px 5px 25px black;
    -webkit-box-shadow: 5px 5px 25px black;
    border-left: 1px solid #3194f7;
    border-right: 1px solid #3194f7;
  transition: background .25s ease-in;
}
.menutekst{
    color: #fafafa; 
}
/* --------- Einde menu ---------*/
/* --------- Begin Banner ---------*/

#banner {
    width: 700px;

}

#box {
    background: url(../img/bannervoor.png) no-repeat 0 0;
    height: 100px;
}

#panning{
    background: #fff url(../img/containers.png) repeat bottom;
    height: 100px;
    position: relative; /* om z kunnen in te stellen*/
    z-index: -1;
    -webkit-animation: pan 40s infinite linear;
    animation: pan 40s infinite linear;
}

@-webkit-keyframes pan {
    0% {
        background-position: 320px bottom;
    }
    100% {
        background-position: left bottom;
    }
}

@keyframes pan {
    0% {
        background-position: 160px bottom;
    }
    100% {
        background-position: left bottom;
    }
}




/* --------- Einde Banner ---------*/



div#inhoud{
    background-color: cyan;
}

/* --------- Einde Pagina div ---------*/
div#zijbalk{
    background-color: grey;
    width: 200px;
    float: left;
}
div#footer{
    background-color: purple;
    clear: both;
}

Answer 1

你走了：

http://jsfiddle.net/dustindowell/HruWx/

你需要实际移动div而不是仅仅将背景变成旋转木马。

<强> CSS

#banner {
    width: 700px;
    overflow: hidden;
}
#box {
    background: url(http://placehold.it/160x120/000&text=Cold-Person);
    height: 100px;
}
#panning {
    background: url(http://placehold.it/160x120/&text=Warm-Blanket);
    height: 100px;
    /* om z kunnen in te stellen*/
    z-index: 1;
    -webkit-animation: pan 10s;
    animation: pan 10s;
}
@-webkit-keyframes pan {
    0% {
        -webkit-transform: translateX(700px);
    }
    100% {
        -webkit-transform: translateX(0px);
    }
}
@keyframes pan {
    0% {
        transform: translateX(700px);
    }
    100% {
        transform: translateX(0px);
    }
}

掩蔽动画不起作用

1 个答案: