I've scoured the depths of Google until my eyes hurt. Despite trying numerous codes, I've had no luck at all. I am convinced that there must be a way to make images appear and disappear in a random sequence while always having one image displayed in the same location. There are a total of 4 images involved. My coding is in HTML5, and here's an example snippet:
<body>
<div id="content">
<figure id="suv">
<img src="./cadillac_escalade.png" alt="SUV" style="float: right" width="210" height="155">
</figure>
<figure id="car">
<img src="./ICAR.png" alt="Car" style="float: left" width="220" height="135">
</figure>
</body>
CSS:
figure
{
display: block;
}
and
.blink {
animation-duration: 0.5s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(5, start);
}
@keyframes blink {
80% {
visibility: hidden;
}
}
I attempted the CSS code found on http://jsfiddle.net/r6dje/, with some tweaks from this site. However, I don't want it to just blink – I need the images to truly appear/disappear/reappear. While I consider myself decently skilled in html, for some reason, this particular issue has me stumped! If anyone out there can illuminate this problem and help me get the code running smoothly, I would be eternally grateful. Thank you in advance!