How to implement the explosion effect of images in a block using css animation?

Question

css

Hello!

There is a block with animation, the filling of which I want to implement with the effect of an explosion of images of flowers: 3 flowers immediately appear in different parts of the block and at different angles, then 3 more also in different parts and at different angles. I use css animation.

I currently have 2 problems:

1 - the images are initially rotated to the desired degree, but then for some reason they again occupy their original position
2 - how to achieve the effect of the appearance of 3 images first, and after a short period of time the rest?

Answer 1

1. How to make several animations at the same time: here .
2. Set different timings in the desired animations (in percentages).