css动画持续时间似乎并不重要

Question

我希望这个元素，bluebag，在延迟后消失，然后在延迟后重新出现。它正在做那些事情，但我希望以后再出现。不过，无论我将动画持续时间设置为什么，都不会在以后重新出现。有人能告诉我我做错了什么吗？

​

.anim-object {
    position: absolute;
    opacity: 0;
    height: auto;
    transform: translate(-50%, 0);
    animation-timing-function: linear;
}
.bluebag {
  opacity: 1;	
  animation-name: opacityOff;
  animation-fill-mode: forwards;
  animation-duration: 100s; /* doesn't seem to matter what I put here */
  animation-delay: 5s;

}
.iteration-1 {
  animation-iteration-count: 1;
}
.speed-7 {
    animation-duration: 7s
}
@keyframes opacityOff {
    0% {
        opacity: 0;
    }
  99% {
    opacity: 0;
  }
  100% {
        opacity: 1;
    }
}

<img class="anim-object bluebag iteration-1 speed-7 " src="http://via.placeholder.com/350x150" />

​

Answer 1

您的animation-duration属性总是设置为7s，因为您要在speed-7类名上重写它。

更改此值或移除该类名以使其与100s一起工作

在另一种情况下，您的animation-iteration被设置为执行一次，因此在第一次迭代中动画将结束。您必须将infinite放在允许动画无限执行的位置。

致以问候。