Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), ensemble d'immeubles qui poussent comme des champignons : 3/07/2017

Cette animation fait tourner un terrain vert sur lequel pousse 6 immeubles à la suite (mais pas avec le même délai), sur 10s.

Cette application utilise les héritages de propriétés, les fractions d'animations et le changement de hauteur des murs dans l'animation. Il y a beaucoup d'éléments différents, 6 tours d'immeubles, qu'il faut faire pousser à des moments précis de l'animation de 10s. Il a fallu également effectuer un plaquage des murs sur des cadres déplacés, avec simple ou double rotation. Il est évident qu'en CSS3 cette animation est longue en texte! L'utilisation de JavaScript réduirait considérablement le code mais ce n'est pas le but de ces pages.

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS). J'ai conçu cette animation à partir de la possibilité de faire de la 3D avec des cadres en CSS3.