Thanks for this well presented video. How would I change the image randomly from an ever growing image folder like a gallery every time the animation starts.
Do you have a way of getting an up-to-date list of all the images that you can access via JavaScript? 
The way I’m hoping this will work is that you create a notices on our website which we capture with html2canvas and load them into a gallery folder on the same server as the website. We have a a few div’s “floating” around on our main page using css animation and on the start of every iteration we need a random image to replace the one that had first appeared. So yes we can access these images with Javascript (I think). I tried to combine code from your video with this link ( How to get random image from directory using PHP - Stack Overflow) but can’t seem to get it to work. My knowledge of things beyond html and css is limited.
How are the initial images loaded? Are they hard coded in the HTML? Or are those images specified via some JavaScript?
The reason I ask is that you may be able to accomplish what you are trying to do with just some DOM manipulation and not have to worry about the animation loop
The images at this stage are in the html. But, because they will be created by a person using my website they will have to be sourced randomly from a folder on the server.
Here is text html with two floating images.
I’ve supplied two extra images for testing.
TEST * { margin: 0; padding: 0; } a{color: coral; } a:hover{ color: skyblue; } body { background-color: black; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } .BG_wrap { position: fixed; width: 100%; height: 100%; } #BgVideo{ position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } #floatingNotice1{ width: 320px; height: 577px; position: absolute; opacity: 0.8; animation-name: p1 ; animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: linear; } #floatingNotice1:hover{ opacity: 1; cursor: pointer; } @keyframes p1 { from{transform: scale(0) translate(-800px,2000px)} to{transform: scale(1) translate(1900px,-500px)} } #floatingNotice2{ width: 320px; height: 577px; position: absolute; opacity: 0.8; animation-name: p2; animation-duration: 18s; animation-iteration-count: infinite; animation-timing-function: linear; } #floatingNotice2:hover { opacity: 1; cursor: pointer; } @keyframes p2 { from{transform: scale(.8) translate(2500px,-500px)} to{transform: scale(0) translate(-800px,2000px)} }<!-- ............................................ FLOATING IMAGES.................................................... -->
<div id="floatingNotice1" onclick="floatSelected()"><img src="vista1.jpg" width="100%" height="100%" ></div>
<div id="floatingNotice2" onclick="floatSelected()"><img src="vista2.jpg" width="100%" height="100%"></div>