Question

我在最后一个n-child上停止交叉淡入淡出动画时遇到了一些麻烦。我知道动画填充模式：转发，但它似乎不起作用（我已经尝试将它放在不同的地方，例如在最初的.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 }
}

我不太确定我做错了什么或我错过了什么。提前谢谢！

Answer 1

由于您的@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>

根据您打算如何处理这些项目以及它们如何重叠，以及第二项是第3项等等，您可以简单地让@keyframes规则保持在opacity: 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>

Answer 2

请将其作为example推荐，您甚至可以这样尝试，在某段延迟后，在animation上再次呼叫声明的each child。现在animation-fill-mode:forwards会考虑以property结尾的动画的最后100%，即在动画结束时，您的opacity的值将被应用。在下面的示例中，我使用animation-fill-mode:forwards为每个image执行图像的颜色转换。

＆＃13;

div img {
  width: 250px;
  height: 250px;
  position: absolute;
}

div img:nth-child(1) {
  opacity: 0;
  animation: mv 10s linear forwards;
}

div img:nth-child(2) {
  opacity: 0;
  animation: mv 10s linear 10s forwards;
}

div img:nth-child(3) {
  opacity: 0;
  animation: mv 10s linear 20s forwards;
}

div img:nth-child(4) {
  opacity: 0;
  animation: mv 10s linear 30s forwards;
}

@keyframes mv {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<div>
  <img src="http://placehold.it/301/f22" alt="Image 1">
  <img src="http://placehold.it/302/f2f" alt="Image 2">
  <img src="http://placehold.it/303/ff2" alt="Image 3">
  <img src="http://placehold.it/304/2f2" alt="Image 4">
</div>

＆＃13;

如何在最后一个nth-child css3上停止css动画

2 个答案: