Ja, das ist möglich, aber nur für eine fixe maximalmenge an Elementen.
Man muss keyframe animationen und Regeln für jedes Element für jede
Anzahl an maximal möglichen Elementen definieren. Hier ein CSS Beispiel
mit bis zu 3 Elementen: https://jsfiddle.net/qg1urysx/
Langfristig ist das aber nicht wartbar. Ich empfehle statdessen scss zu
verwenden, um die massive Menge an benötigtem redundantem CSS Code
generieren zu lassen: https://jsfiddle.net/e0pdow1y/
Hier habe ich $max_rotor_messages mal auf 20 gesetzt, damit kann man bis
zu 20 Elemente haben, zwischen denen gewechselt wird.
Der Trick ist eine Kombination aus Keyframe animationen und dem css3
:first-child:nth-last-child(n) trick, der es erlaubt, das erste element,
und somit auch jedes beliebige nachfolgende, zu stylen, falls das
parent-element n elemente enthält. Man nutzt dann die Animationen für
das einblenden. Der css3 trick verwendet man um zu ermitteln, welche
Animation man braucht, weil man dort nach dem Ausblenden ne nachdem wie
viele Elemente man hat unterschiedlich lange warten muss, biss man es
wieder einblendet, und das animation-delay zu setzen, damit nicht alle
gleichzeitig eingeblendet werden.
Eventuell sollte man noch die diversen vendor prefixes für bessere
Browserkompatiblität ergenzen. (Also z.B. zusätzlich noch
-webkit-animation, -moz-animation, @-webkit-keyframe, etc.). Aber ich
weiss sowieso nicht, seit wann :nth-last-child von den diversen Browsern
unterstützt worden ist.
