Shuffle images animations

Hello!

I am trying to create an animation that will appear 3 different random images from a list with some delay between.
Is there anyway that I can make it without javascript or it is necessary?

I guess only with keyframes I cannot create the random stuff that I want.

I think to create a random order, it will require some form of programming, as I don’t think this can be done with static HTML and CSS.
If you insist on not using javascript, you would probably have to look at doing it server-side. For example a common language like PHP can randomise the order that images appear in the HTML on page load, or randomise a class given to the elements, which links to an order property in the CSS.

Either way, it will need a little bit of scripting in one language or another.

1 Like

It depends on your use case. If you want the animation and images to show after an element has been clicked then you can do a pseudo randomness with keyframes.

It works by running keyframes very quickly all the time and then to stop when clicked and settling on whatever was the current frame. However if you wanted it to start all by itself then that method is no good as you can’t start with the animation playstate paused as that means nothing happens. The randomness occurs in the time it takes you to click the button to stop the keyframe.

You could just use a little JS to create the randomness to stop the keyframe and then do the rest of it in css but if you do that then you may as well use js as in your other thread.

I’m out today but if you can explain the dynamics of what you want in more detail then perhaps we can get closer to the solution you are looking for either in css or js. What was wrong with the js version in the other thread?

4 Likes

I got again the same error with the js in the ohter thread.

I will need to have an animation that will choose 3 images from a list of 20 and appear them on the screen without any interaction.
Then after some period lets say 3 seconds, it will make these 3 images disappear and in their place they will be another 3 from the list.

It this more clear to what I need?
I am ok to use javascript too.

That sounds more like a carousel slider of which there are many about..

The closest I could get to in CSS without any js would be something like this:

It uses 21 images and cycles through 3 at a time infinitely. There is no randomness though and the images just cycle from the start each time. The CSS uses magic numbers and is tied to the number of images and cannot be altered without adjusting everything that relies on there being 21 images present (3 x 7). The timing and transforms are all geared to work with that amount. Usually you would automate this process with JS and take account of how many images there are and adjust the code automatically.

However it may serve as an example to see if his was the kind of thing you were looking for?

2 Likes

hey yes, many thanks.

I will work with it, it will help me.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.