我的主页上有一个褪色的幻灯片，循环播放4张图片。在内页，我只会有一个图像，但我希望它执行它的初始动画，然后停止。我正在使用的特定幻灯片使用了CSS关键帧，但是如果我删除了CSS关键帧或动画CSS，那么页面就会停留在那里，加载时什么也不做。animate CSS设置为infinite，我知道这是它的一部分，因为它是无限循环的，但我要做的是在内页上保持相同的一致性，只有一个图像它需要初始动画，但在初始动画和图像加载后，幻灯片应该停止。现在，它似乎遍历了所有内容，所以有了CSS关键帧，它加载了我的图像，然后它是空白的一段时间，最终将再次显示图像。我知道这就是它的设计工作方式，我只是不知道如何调整它，让它只与一个图像一起工作，而不像它那样通过那些CSS关键帧循环。即使CSS完全不同，也没关系，因为它将在完全不同的页面上:-)
HTML:
<div class="slide">
<div style="background-image:url(https://images.unsplash.com/photo-1575932150875-d31ebc835f67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80)"></div>
<div style="background-image:url(https://images.unsplash.com/photo-1608500567505-269fa4192c58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1704&q=80)"></div>
<div style="background-image:url(https://images.unsplash.com/photo-1477936821694-ec4233a9a1a0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1620&q=80)"></div>
<div style="background-image:url(https://images.unsplash.com/photo-1485735662814-c4f66e49dbae?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80)"></div>
</div>
CSS:
.slide {
background: #fff;
height: 350px;
overflow: hidden;
position: relative;
width: 100%;
}
.slide > div {
animation: slide 16s infinite;
background-position: center center;
background-size: cover;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
}
.slide > div:nth-child(2) {
animation-delay: 4s;
}
.slide > div:nth-child(3) {
animation-delay: 8s;
}
.slide > div:nth-child(4) {
animation-delay: 12s;
}
@keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
transform: scale(1.2);
}
}
这里是小提琴:https://jsfiddle.net/nd81hzuc/，它有四个图像:-)
任何帮助都是感激的!
谢谢,Josh
你可以使用这个属性animation-iteration-count: 1;来决定你的动画将运行多少次。你可以在<div class="slide">中使用单个图像，这样只有一个图像通过@keyframes循环，这是为了方便动画:
@keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
transform: scale(1.2);
}
60% {
transform: scale(1);
}
100% {
transform: opacity(1);
}
}
就像下面的演示片段
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1;
/*Shorthand property of animation ~ animation: example 4s 1;*/
}
@keyframes example {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
transform: scale(1.2);
}
60% {
transform: scale(1);
}
100% {
transform: opacity(1);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>如果你只想显示一个图像的动画。首先，删除你不想显示的div。然后，需要将forwards 1替换为infinite。最后调整你的关键帧，设置不透明度。和";transform"设置为100%，并指定您希望图像保持的状态
.slide {
background: #fff;
height: 350px;
overflow: hidden;
position: relative;
width: 100%;
}
.slide>div {
animation: slide 10s forwards 1; /* Play animation only once */
background-position: center center;
background-size: cover;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
}
@keyframes slide {
100% {
opacity: 1;
}
100% {
transform: scale(1.2);
}
}<div class="slide">
<div style="background-image:url(https://images.unsplash.com/photo-1575932150875-d31ebc835f67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80)"></div>
</div>你可以给单个图像基本相同的关键帧，稍微调整一下——让它保持不透明度:1，并将animation-fill-mode设置为forward。
<style>
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol,
ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
/* Slides */
.slide {
background: #fff;
height: 350px;
overflow: hidden;
position: relative;
width: 100%;
}
.slide>div {
animation: slidestay 16s 1;
animation-fill-mode: forwards;
background-position: center center;
background-size: cover;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
}
@keyframes slidestay {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
transform: scale(1.2);
}
100% {
opacity: 1;
}
}
}
</style>
<div class="slide">
<div style="background-image:url(https://images.unsplash.com/photo-1575932150875-d31ebc835f67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80)"></div>
</div>