css - 使用css使对象出现，然后延迟后，使其消失

Question

我正在使用 CSS 使图像在一定的延迟时间后出现。我想让它在另一个延迟时间后消失。我有出现部分工作，但是一旦我添加消失部分，它们都不起作用。有人可以告诉我我做错了什么吗？

html:

<img class="anim-object anim-smallcar bluebag" src="img/bluebag.gif" />

CSS:

.bluebag {
    position: absolute;
    bottom: 160px;
    left: 42.25%;
    opacity: 0; 

    animation-name: opacityOn;
    animation-duration: 100ms;
    animation-delay: 13.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

    animation-name: opacityOff;
    animation-duration: 100ms;
    animation-delay: 17.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;

}
@keyframes opacityOn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes opacityOff {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Answer 1

您可以添加更多 CSS 动画迭代，同时更改 @keyframes 上的不透明度值，从 0% 到 25% 到 50% 到 75%，最后是 100%

.bluebag {
    opacity: 0; 
    background: blue;
    height: 100px;
    width: 100px; 
    animation: opacityOn 5s normal forwards;
    animation-delay: 2s;
}

@keyframes opacityOn {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>