个人中心
gpt4 book ai didi

html - 如何使 css 动画停止在最后的第 n 个子 css3

转载 作者：可可西里 更新时间：2023-11-01 12:58:19 27 4
gpt4 key购买 nike

我在让交叉淡入淡出动画停止在最后一个子节点上时遇到了一些麻烦。我知道 animation-fill-mode: forwards ，但它似乎不起作用(我试过将它放在不同的地方，例如在最初的 .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>

我的 CSS 在这里:

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

我不太确定自己做错了什么或遗漏了什么。提前致谢!

最佳答案

由于您的 @keyframes 规则以 opacity: 0 结尾，因此您是否使用 forwards 并不重要，它的结束状态将两者都是 opacity: 0。

一个解决方案是为最后一个元素添加第二个 @keyframes 规则，以及 forwards。

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

.crossfade > img { 
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    backface-visibility: hidden;
    animation: imageAnimation 43s linear 0s 1 forwards;
}

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

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

.crossfade > img:nth-child(4) {
    animation-delay: 21s;
    animation-name: imageAnimationLast;
}

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

@keyframes imageAnimationLast { 
    0%{ opacity:0;
        animation-timing-function: ease-in; }
    8% { opacity: 1;
    100% { opacity: 1}
}
<div class= "ad">
    <div class="crossfade">
      <img src="http://placehold.it/200/f00" alt="Image 1">
      <img src="http://placehold.it/200/ff0" alt="Image 2">
      <img src="http://placehold.it/200/0ff" alt="Image 3">
      <img src="http://placehold.it/200/00f" alt="Image 4">
    </div>
  </div>

根据您打算对这些元素执行的操作以及它们如何重叠，并且由于第 2 个位于第 3 个之上，依此类推，您可以简单地让 @keyframes 规则保持在 不透明度:1

.crossfade > img { 
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    backface-visibility: hidden;
    animation: imageAnimation 43s ease-in 0s 1 forwards;
}

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

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

.crossfade > img:nth-child(4) {
    animation-delay: 21s;
}

@keyframes imageAnimation { 
    0%{ opacity:0; }
    8% { opacity: 1; }
    100% { opacity: 1; }
}
<div class= "ad">
    <div class="crossfade">
      <img src="http://placehold.it/200/f00" alt="Image 1">
      <img src="http://placehold.it/200/ff0" alt="Image 2">
      <img src="http://placehold.it/200/0ff" alt="Image 3">
      <img src="http://placehold.it/200/00f" alt="Image 4">
    </div>
  </div>

关于html - 如何使 css 动画停止在最后的第 n 个子 css3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45895202/

27 4 0
文章推荐： javascript - 将 jQuery 偏移量从一个元素复制到另一个元素会将它们放在不同的位置
文章推荐： php - Laravel 在 null 上调用成员函数 setCookie() - 当从中间件返回 Controller 操作时
文章推荐： javascript - 向 mustache/php 添加条件
文章推荐： html - CSS 目录 - 嵌套列表后计数器不会重置
可可西里
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com