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

那样的东西？

.bluebag {
    opacity: 0; 
    background: blue;
    height: 100px;
    width: 100px; 
    animation: opacityOn 1s normal forwards step-end;
    animation-delay: 2s;
}

@keyframes opacityOn {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

CSS不是一种迭代语言。当你写下：

    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;

你的第二部分覆盖了第一部分。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我对Alexandre的代码所做的唯一改变是使不透明度关键帧像这样做：

@keyframes opacityOnAndOff {
    0% {
        opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

根据您希望花费多长时间进行完全不透明度然后清除，您可以更改百分比，因此如果您想要更长时间关闭，可以将上面的代码更改为

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

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

3 个答案: