<分区>
标签 css key css-animations
我有一个交叉渐变动画来显示 3 个步骤的内容。我怎样才能让它在第三个之后结束？所以不再交叉淡入淡出。
我把它分成了nth-child(),
这是我的 CSS 代码:
.animation {
-moz-animation: imageAnimation 30s linear 0s;
-ms-animation: imageAnimation 30s linear 0s;
-o-animation: imageAnimation 30s linear 0s;
-webkit-animation: imageAnimation 30s linear 0s;
-webkit-backface-visibility: hidden;
animation: imageAnimation 30s linear 0s;
color: black;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.animation:nth-child(2) {
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
-o-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animation:nth-child(3) {
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
HTML
<div class="box">
<div class="animation">
<h4>Hello-1</h4>
</div>
<div class="animation">
<h4>Hello-2</h4>
</div>
<div class="animation">
<h4>Hello-3</h4>
</div>
</div>
最佳答案
如果你所说的“结束”意味着第三个 child 没有消失，你需要声明新的动画 @keyframes 声明你用于第三个 child ，所以它不会结束(100%)，不透明度:0。
编辑: 这就是新的关键帧定义的样子:
@keyframes imageAnimationStop {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
100% {
opacity: 1
}
}这表示结束状态 (100%) 应该有 opacity: 1 以便它保持可见。我也 fork 了你的codepen。这个新的关键帧没有浏览器前缀，但我想你可以做那么多:)。然后你只需要为你的第三个 child 使用这个新的 heyframes 定义 demo
关于css - 在 nth-child/CSS3 结束时停止动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33802331/