use css to make object appear, then after delay, make it disappear

Question

I'm using css to make an image appear after a certain delay time. I want to make it disappear after another delay time. I have the appear part working, but once I add the disappear part, neither of them work. Can someone tell me what I'm doing wrong, please?

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

You can add more CSS animation iterations while changing the value of your opacity on the @keyframes the 0% to 25% to 50% to 75% and finally 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>

Answer 2

The only change I would make to Alexandre's code is to make the opacity keyframe all one thing like this:

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

Depending on how long you want to spend on going to full opacity and then clearing out, you can change the percentages, so if you want a longer closing, you could change the code above to something like

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