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

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

Answer 3

Something like that ?
.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 is not an iterative language. When you write that:
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;
your second section override the first one.