CSS动画 - 图像加倍

Question

嗨我完成动画是CSS在引导程序之上。一切都很好，但首先，加载的图像在动画之前不会隐藏，最重要的是在动画图像的第一个循环开始加倍之后。

我有大约70幅图像要制作动画，每张图像都是1秒接一秒，它们在屏幕上滑动。 http://scr.hu/30bj/mxy1h

在HTML中，它被定义为具有课程的div。

CSS代码：

＆＃13;

＆＃13;

#skins{
	height:80px;
	/*overflow:hidden;*/
	position:relative;
	z-index:150;
}
#skins > div{
	position:absolute;
	-webkit-animation: sky 25s linear infinite;
	-moz-animation: sky 25s linear infinite;
	animation: sky 25s linear infinite;
}
#skins .user1{background:url(../images/skins/user1.png) no-repeat center;width:110px;height:200px;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;top:10px;}
#skins .user2{background:url(../images/skins/user2.png) no-repeat center;width:110px;height:200px;-webkit-animation-delay: 2s;-moz-animation-delay: 2s;animation-delay: 2s;top:10px;}
#skins .user3{background:url(../images/skins/user3.png) no-repeat center;width:110px;height:200px;-webkit-animation-delay: 3s;-moz-animation-delay: 3s;animation-delay: 3s;top:10px;}
#skins .user4{background:url(../images/skins/user4.png) no-repeat center;width:110px;height:200px;-webkit-animation-delay: 4s;-moz-animation-delay: 4s;animation-delay: 4s;top:10px;}
#skins .user5{background:url(../images/skins/user5.png) no-repeat center;width:110px;height:200px;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;animation-delay: 5s;top:10px;}
and more

@-webkit-keyframes sky {
	0%{
 		left:0%;
		margin-left:-350px;
	}
 	100% {
 		left:100%;
		margin-left:0px;
	}
}
@keyframes sky {
	0%{
		left:0%;
		margin-left:-350px;
	}
	100% {
		left:100%;
		margin-left:0px;
	}
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

不是试图移动单个元素，而是先将它们全部放置，然后移动容器。目前，这从左到右动画它们，并假设你知道会有多少元素（假设你给它们每个定制的类名，我假设有一些手动/编程方式你生成这些）。它也是最后一个运行，所以如果你想维护原始代码的顺序，你需要颠倒HTML元素的顺序。

<强> JS FIDDLE

<强> HTML

<div id="anim-cont">
    <section id="skins">
        <div class="8Wofel1">
            <div class="inner"></div>
        </div>
        <div class="AbnormalPL">
            <div class="inner"></div>
        </div>
        <div class="Adamonia">
            <div class="inner"></div>
        </div>
        <div class="Agelika9">
            <div class="inner"></div>
        </div>
        <div class="AlfheimPL">
            <div class="inner"></div>
        </div>
        <div class="Ankos1">
            <div class="inner"></div>
        </div>
        <div class="Axmelka_">
            <div class="inner"></div>
        </div>
        <div class="BlackKiller999">
            <div class="inner"></div>
        </div>
        <div class="blaze4r">
            <div class="inner"></div>
        </div>
        <div class="Bramsiowelove">
            <div class="inner"></div>
        </div>
        <div class="BrysiekxD">
            <div class="inner"></div>
        </div>
        <div class="buuudzik89">
            <div class="inner"></div>
        </div>
        <div class="Chamosial">
            <div class="inner"></div>
        </div>
        <div class="Chicken">
            <div class="inner"></div>
        </div>
        <div class="Cocacolciaaa">
            <div class="inner"></div>
        </div>
        <div class="Drejken">
            <div class="inner"></div>
        </div>
        <div class="EnderSweet">
            <div class="inner"></div>
        </div>
        <div class="exsyther">
            <div class="inner"></div>
        </div>
        <div class="Filippexo">
            <div class="inner"></div>
        </div>
        <div class="Gluesh_PL">
            <div class="inner"></div>
        </div>
        <div class="Gumis">
            <div class="inner"></div>
        </div>
        <div class="imago96">
            <div class="inner"></div>
        </div>
        <div class="Jelonn">
            <div class="inner"></div>
        </div>
        <div class="Juleczka_">
            <div class="inner"></div>
        </div>
        <div class="Kemotomek">
            <div class="inner"></div>
        </div>
        <div class="Koralina_">
            <div class="inner"></div>
        </div>
        <div class="KraxPL">
            <div class="inner"></div>
        </div>
        <div class="l4y0ut">
            <div class="inner"></div>
        </div>
        <div class="Lady_Anne">
            <div class="inner"></div>
        </div>
        <div class="Lusiaaa">
            <div class="inner"></div>
        </div>
        <div class="Majk21">
            <div class="inner"></div>
        </div>
        <div class="Maker">
            <div class="inner"></div>
        </div>
        <div class="MakunaHatata">
            <div class="inner"></div>
        </div>
        <div class="Malpka2000">
            <div class="inner"></div>
        </div>
        <div class="Masta_Artista">
            <div class="inner"></div>
        </div>
        <div class="Merkador">
            <div class="inner"></div>
        </div>
        <div class="Mikejla">
            <div class="inner"></div>
        </div>
        <div class="Milotjan">
            <div class="inner"></div>
        </div>
        <div class="minestee">
            <div class="inner"></div>
        </div>
        <div class="MineTurboo">
            <div class="inner"></div>
        </div>
        <div class="Misurii">
            <div class="inner"></div>
        </div>
        <div class="MrTheSkuller">
            <div class="inner"></div>
        </div>
        <div class="mr_Oxygen">
            <div class="inner"></div>
        </div>
        <div class="Mykozis">
            <div class="inner"></div>
        </div>
        <div class="Nafyrana">
            <div class="inner"></div>
        </div>
        <div class="Nathaly_">
            <div class="inner"></div>
        </div>
        <div class="Olusia_">
            <div class="inner"></div>
        </div>
        <div class="Pan_Zolwik">
            <div class="inner"></div>
        </div>
        <div class="Patex">
            <div class="inner"></div>
        </div>
        <div class="Patros2012">
            <div class="inner"></div>
        </div>
        <div class="Pawlkoko">
            <div class="inner"></div>
        </div>
        <div class="PiknyKwiatuszek">
            <div class="inner"></div>
        </div>
        <div class="Pysia27">
            <div class="inner"></div>
        </div>
        <div class="samoloth">
            <div class="inner"></div>
        </div>
        <div class="sync667">
            <div class="inner"></div>
        </div>
        <div class="szok113">
            <div class="inner"></div>
        </div>
        <div class="TheCastiiPl">
            <div class="inner"></div>
        </div>
        <div class="Tomek31">
            <div class="inner"></div>
        </div>
        <div class="TosiaYou">
            <div class="inner"></div>
        </div>
        <div class="vWhiskas">
            <div class="inner"></div>
        </div>
        <div class="WaffOut">
            <div class="inner"></div>
        </div>
        <div class="Watom">
            <div class="inner"></div>
        </div>
        <div class="wiSien98">
            <div class="inner"></div>
        </div>
        <div class="WoojtekPro">
            <div class="inner"></div>
        </div>
        <div class="Xana123PL">
            <div class="inner"></div>
        </div>
        <div class="XPD">
            <div class="inner"></div>
        </div>
        <div class="xRosenrot">
            <div class="inner"></div>
        </div>
        <div class="zaqlinacz">
            <div class="inner"></div>
        </div>
        <div class="Zayawka">
            <div class="inner"></div>
        </div>
        <div class="Zupkaaa">
            <div class="inner"></div>
        </div>
    </section>
</div>

<强> CSS

#anim-cont{
    position:relative;
    width:100%;
    height:200px;
    overflow:hidden;
    /* add background image of mountains here */
}
#skins{
    position:absolute;
    top:0;
    left:0;
    height:200px;
    display:table;
    -webkit-animation: sky 70s linear infinite;
    -moz-animation: sky 70s linear infinite;
    animation: sky 70s linear infinite;
}
#skins > div{
    display:table-cell;
}
#skins > div .inner{
    display:block;
    width:110px;
    height:200px;
}
#skins .8Wofel1{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/8Wofel1.png) no-repeat center;}
#skins .AbnormalPL{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/AbnormalPL.png) no-repeat center;}
#skins .Adamonia{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Adamonia.png) no-repeat center;}
#skins .Agelika9{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Agelika9.png) no-repeat center;}
#skins .AlfheimPL{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/AlfheimPL.png) no-repeat center;}
#skins .Ankos1{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Ankos1.png) no-repeat center;}
#skins .Axmelka_{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Axmelka_.png) no-repeat center;}
#skins .BlackKiller999{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/BlackKiller999.png) no-repeat center;}
#skins .blaze4r{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/blaze4r.png) no-repeat center;}
#skins .Bramsiowelove{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Bramsiowelove.png) no-repeat center;}
#skins .BrysiekxD{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/BrysiekxD.png) no-repeat center;}
#skins .buuudzik89{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/buuudzik89.png) no-repeat center;}
#skins .Chamosial{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Chamosial.png) no-repeat center;}
#skins .Chicken{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Chicken.png) no-repeat center;}
#skins .Cocacolciaaa{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Cocacolciaaa.png) no-repeat center;}
#skins .Drejken{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Drejken.png) no-repeat center;}
#skins .EnderSweet{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/EnderSweet.png) no-repeat center;}
#skins .exsyther{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/exsyther.png) no-repeat center;}
#skins .Filippexo{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Filippexo.png) no-repeat center;}
#skins .Gluesh_PL{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Gluesh_PL.png) no-repeat center;}
#skins .Gumis{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Gumis.png) no-repeat center;}
#skins .imago96{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/imago96.png) no-repeat center;}
#skins .Jelonn{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Jelonn.png) no-repeat center;}
#skins .Juleczka_{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Juleczka_.png) no-repeat center;}
#skins .Kemotomek{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Kemotomek.png) no-repeat center;}
#skins .Koralina_{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Koralina_.png) no-repeat center;}
#skins .KraxPL{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/KraxPL.png) no-repeat center;}
#skins .l4y0ut{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/l4y0ut.png) no-repeat center;}
#skins .Lady_Anne{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Lady_Anne.png) no-repeat center;}
#skins .Lusiaaa{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Lusiaaa.png) no-repeat center;}
#skins .Majk21{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Majk21.png) no-repeat center;}
#skins .Maker{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Maker.png) no-repeat center;}
#skins .MakunaHatata{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/MakunaHatata.png) no-repeat center;}
#skins .Malpka2000{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Malpka2000.png) no-repeat center;}
#skins .Masta_Artista{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Masta_Artista.png) no-repeat center;}
#skins .Merkador{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Merkador.png) no-repeat center;}
#skins .Mikejla{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Mikejla.png) no-repeat center;}
#skins .Milotjan{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Milotjan.png) no-repeat center;}
#skins .minestee{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/minestee.png) no-repeat center;}
#skins .MineTurboo{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/MineTurboo.png) no-repeat center;}
#skins .Misurii{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Misurii.png) no-repeat center;}
#skins .MrTheSkuller{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/MrTheSkuller.png) no-repeat center;}
#skins .mr_Oxygen{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/mr_Oxygen.png) no-repeat center;}
#skins .Mykozis{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Mykozis.png) no-repeat center;}
#skins .Nafyrana{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Nafyrana.png) no-repeat center;}
#skins .Nathaly_{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Nathaly_.png) no-repeat center;}
#skins .Olusia_{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Olusia_.png) no-repeat center;}
#skins .Pan_Zolwik{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Pan_Zolwik.png) no-repeat center;}
#skins .Patex{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Patex.png) no-repeat center;}
#skins .Patros2012{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Patros2012.png) no-repeat center;}
#skins .Pawlkoko{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Pawlkoko.png) no-repeat center;}
#skins .PiknyKwiatuszek{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/PiknyKwiatuszek.png) no-repeat center;}
#skins .Pysia27{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Pysia27.png) no-repeat center;}
#skins .samoloth{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/samoloth.png) no-repeat center;}
#skins .sync667{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/sync667.png) no-repeat center;}
#skins .szok113{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/szok113.png) no-repeat center;}
#skins .TheCastiiPl{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/TheCastiiPl.png) no-repeat center;}
#skins .Tomek31{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Tomek31.png) no-repeat center;}
#skins .TosiaYou{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/TosiaYou.png) no-repeat center;}
#skins .vWhiskas{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/vWhiskas.png) no-repeat center;}
#skins .WaffOut{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/WaffOut.png) no-repeat center;}
#skins .Watom{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Watom.png) no-repeat center;}
#skins .wiSien98{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/wiSien98.png) no-repeat center;}
#skins .WoojtekPro{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/WoojtekPro.png) no-repeat center;}
#skins .Xana123PL{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Xana123PL.png) no-repeat center;}
#skins .XPD{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/XPD.png) no-repeat center;}
#skins .xRosenrot{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/xRosenrot.png) no-repeat center;}
#skins .zaqlinacz{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/zaqlinacz.png) no-repeat center;}
#skins .Zayawka{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Zayawka.png) no-repeat center;}
#skins .Zupkaaa{
    background:url(http://kwadratowakraina.pl/ccc/images/skins/Zupkaaa.png) no-repeat center;}

@-webkit-keyframes sky {
    0%{
        left:-7700px; /* 110px * 70 avatars */
    }
    100% {
        left:100%;
    }
}
@keyframes sky {
    0%{
        left:-7700px; /* 110px * 70 avatars */
    }
    100% {
        left:100%;
    }
}