Fatal编程技术网
  • html/
  • Html 如何使css动画在最后第n个子css3上停止

Html 如何使css动画在最后第n个子css3上停止

html css animation

Html 如何使css动画在最后第n个子css3上停止,html,css,animation,Html,Css,Animation,在最后一个第n个孩子身上，我有点难以让crossfade动画停止。我知道动画填充模式：向前，但它似乎不起作用（我尝试将其放置在不同的位置，例如在初始.crossfade声明中） 这是我的html： <body> <div class= "ad"> <div class="crossfade"> <img src="image1.jpg" alt="Image 1"> <img src="image2.png

在最后一个第n个孩子身上，我有点难以让crossfade动画停止。我知道动画填充模式：向前，但它似乎不起作用（我尝试将其放置在不同的位置，例如在初始.crossfade声明中）

这是我的html：

<body>
  <div class= "ad">
    <div class="crossfade">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.png" alt="Image 2">
      <img src="image3.png" alt="Image 3">
      <img src="image4.png" alt="Image 4">
    </div>
  </div> 
</body>
我不太确定我做错了什么或者我错过了什么。提前谢谢

由于您的
@关键帧
规则以
不透明度：0
结束，无论是否使用
转发
，其结束状态都将是
不透明度：0

一种解决方案是为最后一项添加第二个
@关键帧
规则，以及
转发

注意，我删除了所有带前缀的属性，以便更容易解析代码。另外，原始代码缺少很多非前缀的属性和关键帧规则，并且您还应该始终将前缀属性放在非前缀属性之前

.crossfade>img{
宽度：300px；
高度：250px；
位置：绝对位置；
顶部：0px；
左：0px；
颜色：透明；
不透明度：0；
z指数：0；
背面可见性：隐藏；
动画：imageAnimation 43s线性0s 1向前；
}
.crossfade>img:第n个子项（1）{
动画延迟：1s；
}
.crossfade>img:n个孩子（2）{
动画延迟：7秒；
}
.crossfade>img:n个孩子（3）{
动画延迟：14秒；
}
.crossfade>img:n个孩子（4）{
动画延迟：21秒；
动画名称：imageAnimationLast；
}
@关键帧图像动画{
0%{不透明度：0；
动画计时功能：轻松；}
8%{不透明度：1；
动画计时功能：减缓；}
17%{不透明度：1}
25%{不透明度：0}
100%{不透明度：0}
}
@关键帧imageAnimationLast{
0%{不透明度：0；
动画计时功能：轻松；}
8%{不透明度：1；
100%{不透明度：1}
}
将此作为一个
示例
，您甚至可以这样尝试，在一定的延迟后，在
每个子项上反复调用声明的
动画
。
现在
动画填充模式：向前
考虑到动画的最后一个
属性
，该属性在
100%
处结束，即在动画结束时，将应用
不透明度的值。在下面的示例中，我对每个
图像
使用了
动画填充模式：向前
，以执行该彩色t图像的转换



divimg{
宽度：250px；
高度：250px；
位置：绝对位置；
}
分区图像：第n个孩子（1）{
不透明度：0；
动画：mv 10s线性向前；
}
分区图像：第n个孩子（2）{
不透明度：0；
动画：mv 10s线性向前10s；
}
分区图像：第n个孩子（3）{
不透明度：0；
动画：mv 10秒线性向前20秒；
}
分区图像：第n个孩子（4）{
不透明度：0；
动画：mv 10秒线性向前30秒；
}
@关键帧mv{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：1；
}
}




非常感谢！您的回答非常简单，这是有道理的。（我对css3还是有点陌生）。我的理解正确吗？声明一个新的“动画”：每次“重新启动”每个孩子的动画？附带问题：我目前正在学习一个教程，并注意到您在回答中不需要使用-o-、-moz-、-webkit-。我的理解是，这些工具用于使其与不同的浏览器兼容，但不管怎样，你的版本似乎都能正常工作。我什么时候会使用它们有特殊情况吗？：]再次感谢堆。@JessicaFoo此答案的解决方案不会重新启动动画，它会创建4个动画，这比我在答案中已经发布的效果要差（检查我的第二个示例，它与此示例完全相同，但更优化），所以我不建议这样做。@JessicaFoo还有，没有前缀属性也不管用，它在您理解的情况下，适用于需要它们的旧浏览器，如果您希望拥有旧浏览器的网站访问者也能看到动画，您应该添加它们。@frnt不明白为什么要发布解决方案b基于4个动画，我发布的是一个非常有效的解决方案，当然你自己也会在自己的网页上使用。对你来说，发布答案比帮助用户找到更好的方法更重要吗？@Jessica Foo不，你需要添加其他前缀才能在其他浏览器上工作，我没有添加，因为我已经添加了refer这是一个例子，并且已经添加了一个由LGSon提供的解释良好的解决方案，该解决方案也说明了浏览器前缀和其他属性。LGSon我没有在我的网站中使用这些代码，我使用的标签完全不同，这就是为什么我添加了引用作为示例，以便OP能够解决并理解它是如何工作的。对于我来说，OP应该理解d每种财产如何运作。

.crossfade > img { 
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    animation-iteration-count:1;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: imageAnimation;
    -webkit-animation: imageAnimation 43s linear 1 0s;
    -moz-animation: imageAnimation 43s linear 1 0s;
    -o-animation: imageAnimation 43 linear 1 0s;
    -ms-animation: imageAnimation 43 linear 1 0s;

}

.crossfade > img:nth-child(1) {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s; 
}

.crossfade > img:nth-child(2) {
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 7s;
    -ms-animation-delay: 7s;
    animation-delay: 7s; 
}
.crossfade > img:nth-child(3) {
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s; 
}

.crossfade > img:nth-child(4) {
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    -o-animation-delay: 21s;
    -ms-animation-delay: 21s;
    animation-delay: 21s;
    animation-fill-mode: forwards;
}

@-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 }
}