1. дома
  2. Вопрос и ответ
  3. CSS-анимация - изображения удвоены

CSS-анимация - изображения удвоены

2014-12-10 2 views
0

Привет, я сделал анимацию CSS поверх бутстрапа. Все в порядке, но сначала загруженные изображения не скрываются перед анимацией, а самое главное после того, как первый цикл анимационных изображений начинает удваиваться.CSS-анимация - изображения удвоены

У меня около 70 изображений для анимации, каждое изображение занимает 1 секунду за другим, они скользят по экрану. http://scr.hu/30bj/mxy1h

В html он определен как div с классом, конечно.

код CSS:

#skins{ 
 
\t height:80px; 
 
\t /*overflow:hidden;*/ 
 
\t position:relative; 
 
\t z-index:150; 
 
} 
 
#skins > div{ 
 
\t position:absolute; 
 
\t -webkit-animation: sky 25s linear infinite; 
 
\t -moz-animation: sky 25s linear infinite; 
 
\t 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 { 
 
\t 0%{ 
 
    \t \t left:0%; 
 
\t \t margin-left:-350px; 
 
\t } 
 
    \t 100% { 
 
    \t \t left:100%; 
 
\t \t margin-left:0px; 
 
\t } 
 
} 
 
@keyframes sky { 
 
\t 0%{ 
 
\t \t left:0%; 
 
\t \t margin-left:-350px; 
 
\t } 
 
\t 100% { 
 
\t \t left:100%; 
 
\t \t margin-left:0px; 
 
\t } 
 
}

источник

2014-12-10 sync667

+0

пожалуйста, укажите Ваш HTML, или еще лучше, http://jsfiddle.net/ – haxxxton

+0

HTTP : //jsfiddle.net/auc3zs7k/ Я вижу, что в этом инструменте изображения более сжаты из-за времени анимации – sync667

+0

будет ли количество скинов изменяться? – haxxxton

ответ

0

Вместо того, чтобы перемещать отдельные элементы, то проще позиционировать их все, а затем переместить контейнер. В настоящее время это оживляет их слева направо и предполагает, что вы знаете, сколько элементов будет (учитывая, что вы давали им каждый классный класс, я предположил, что существует какой-то ручной/программный способ, которым вы их создавали). Он также работает последним, поэтому, если вы хотите сохранить порядок, который был у вашего исходного кода, вам нужно будет отменить порядок элементов 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%; 
    } 
}

источник

2014-12-10 09:15:51 haxxxton

+0

Первый раз, когда я делал анимацию в CSS :) Работает отлично. Спасибо за помощь! – sync667

Смежные вопросы

 Смежные вопросы