html - CSS 动画 - 图像加倍-6ren

html - CSS 动画 - 图像加倍

转载作者：行者123 更新时间：2023-11-28 08:50:11

您好，我已经完成了动画是 Bootstrap 顶部的 CSS。一切都很好，但首先，加载的图像不会隐藏在动画之前，最重要的是在动画图像的第一个循环开始加倍之后。

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

在 html 中，它当然被定义为带有类的 div。

CSS 代码:

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

最佳答案

与其尝试移动单个元素，不如先将它们全部定位，然后再移动容器。目前，这从左到右为它们设置动画，并假设您知道将有多少元素(假设您为它们提供了每个定制的类名，我假设您是通过某种手动/编程方式生成这些的)。它还从后到前运行，因此如果您想保持原始代码的顺序，则需要反转 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%;
    }
}

关于html - CSS 动画 - 图像加倍，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27395697/

文章推荐： jquery - 没有年份的CSS日期选择器

文章推荐： javascript - Fotorama 4. 滑动超过 1 张图像

文章推荐： ios - 来自 SKPhysicsBody applyImpulse 的奇怪行为

文章推荐： javascript - 提交 javascript 表单但数据未正确传递

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 动画 - 图像加倍