CSS-only Image Carousel

[Acorn]

Working on it Acorn but having issues understanding the @keyframes bit.
DEMO

Egg, that was quite loud!

The @keyframes is the timeline of a complete cycle. If that is 20s then 5% is one second in.
The values are the start point of any transforms, position or combination of any of the values the attributes can have.
Tweening occurs from one statement to the next at around 1000 steps a second so very, very smooth.
The velocity of the changes is enabled by the ease-in-out, STEPS(), linear, or Bezier functions that you apply.

Here, as there are 25 objects, each has a 4% slot in sequence to play with.
As I said before, you can have a lead-in and -out as well as the main presentation of a slide.
Makes things too large for the slot and you get a planned overlap or a mess.

Acorn

[Egg Bramhill]

Thanks Acorn, I follow it to a certain extent but I don't understand why the attached xar works correctly after the first two seconds but not at start up. Perhaps you could have a look, nothing important, just trying to make a css like animated gif.

[Acorn]

Thanks Acorn, I follow it to a certain extent but I don't understand why the attached xar works correctly after the first two seconds but not at start up. Perhaps you could have a look, nothing important, just trying to make a css like animated gif.

Egg, a couple of small things to tweak.

The initial opacity has to be zero, otherwise the first cycle, every shape is visible.
The second is you muddled the order of some of the shapes. In the Page & Layer gallery, the stacking matches the order of the shapes' appearance.
The third is you need to play more with the @keyframes actions. They are too many and need some tidying.

I cleaned most things up on the coding.

There is a simplest animation that just requires the one shape and no delays anywhere.

The code is far simpler: css-group-slider-2 - Acorned.xar

<style>
.unpack {
animation: stretch 2s linear infinite;
transform-origin: left;
}
@keyframes stretch {
0% {
transform: scaleX(0);
}
50%, 100% {
transform: scaleX(1);
}
}
</style>

It scales up for one second (50%) and then pauses for the rest (100%).

Hope this gives you a few more insights.

Acorn

[Egg Bramhill]

Thanks again for this Acorn. I kept it as a keyframe thingy as I was trying to grasp the @keyframes bit. I think I've got it now cheers.

The .unpack method is also excellent and far better than an animated gif.

[Acorn]

Thanks again for this Acorn. I kept it as a keyframe thingy as I was trying to grasp the @keyframes bit. I think I've got it now cheers.
The .unpack method is also excellent and far better than an animated gif.

Good. Change the arrow to a hammer and the circle to a nail and alter the path then I think you've hit the nail on the head!

Acorn

[Egg Bramhill]

Don't know about that, getting anything into my skull takes an eternity and keeping it in there is truthfully impossible

LINK