Animated tag cloud on css3

My half wanted an animated tag cloud in LiveJournal. It would seem that the network is full of variations on this topic: rotating, interactive, choose any. But all this wealth is either in javascript or flash. And it is impossible to fasten it to the magazine (standard account, I don’t know about paid ones).

It was necessary to have a rotating tag cloud written in pure css3. At once I will make a reservation, it was possible to solve the problem only partially. Attempts to find something better were not crowned with success, in due time even published a question on Habré.


Actually, that's what I got:
github.com/paratrooper5730/css3AnimatedTagcloud (code)
3611.livejournal.com (magazine with an example).
')
To create an animation, a rule @keyframes is created, in which the initial, final, and, optionally, intermediate properties of the object are specified. And for the object itself, the properties animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction are specified. Thus, it is determined which transformations take place with the object, with what speed and in what direction. There are many learning resources on this topic, I used w3schools.com.

Immediately move on to the limitations that I stumbled upon.
You can specify several @keyframes in the animation-name property for one object, but they will be executed at the same time — you cannot loop one transformation with periods of 10 seconds and parallel another with periods of 5.
The possibilities of animation-timing-function are very limited. Theoretically, one can register any behavior of objects with the help of a large number of intermediate states in @keyframes. But in practice, the animation was clumsy, jerky.

I had to simplify my own task: the “distant” part of the cloud is not visible, the elements appear from nonexistence, and go there.

For this I use 2 transforms.
This is responsible for the movement from top to bottom:
@keyframes tagmove{
from { top:-80px; }
to { top:80px; }
}


And this is - for "floating" the tags from the background to the front and back
@keyframes coloring {

from { opacity: 0; }
50% { opacity: 1; }
to { opacity: 0; }
}


In order for the cloud to be uniform and beautiful, it may be necessary to adjust the animation-duration and animation-delay parameters for different elements. The values ​​that are spelled out there are man-made random. You can also get confused and use absolute positioning, which I did not do. The original location of the tags in the cloud gives the desired pseudo-random scatter horizontally and vertically.

Here, perhaps, that's all. I will be glad to advice how to do better