Html 屏蔽动画不工作_Html_Css

Html 屏蔽动画不工作

html css

Html 屏蔽动画不工作,html,css,Html,Css,尝试制作一个动画，其中“底层”上有一个图像从左向右平移，而另一个图像包含透明区域。这将创建一种掩蔽效果由于某些原因，另一方面，当应用的div位于container/wrapper div内时，此动画不会显示。。当在set div结构之外时，一切似乎都很好，所以我的印象是这一定与我的div的定位有关有谁能帮助这个新手重回正轨 jsfiddle：我的html标记： <body> <div id="container"> <div id="pagina"&g

尝试制作一个动画，其中“底层”上有一个图像从左向右平移，而另一个图像包含透明区域。这将创建一种掩蔽效果

由于某些原因，另一方面，当应用的div位于container/wrapper div内时，此动画不会显示。。当在set div结构之外时，一切似乎都很好，所以我的印象是这一定与我的div的定位有关

有谁能帮助这个新手重回正轨

jsfiddle：

我的html标记：

<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>

给你：

您需要实际移动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);
    }
}

在平移元素背景中设置的图像不可用（404）

#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);
    }
}