Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), mobile pour enfant à 3 niveaux tournoyant : 6/07/2017

Cette animation montre les rotations en cascade d'un mobile pour enfant. Vous avez ici un parfait exemple de l'héritage en cascade des propriétés possibles avec les balises HTML. Pour l'équilibrage, j'ai utilisé les propriétés de la physique, à savoir la préservation des moments de force (poids1 x longueur1 = poids2 x longueur2) en ne tenant compte que des poids des images (les bâtons et ficelles ayant un poids négligeable). J'ai appliqué ceci sur le baton du haut (la partie gauche fait 2 fois le poids de la partie droite : R2 = 2xR1).

Il est intéressant ici de visualiser les effets des options de la fonction "animation" des CSS, à savoir "animation-direction" (alternate ou alternate-reverse : ça permet une fois un cycle terminé de faire l'animation dans l'autre sens, pratique ici car les ficelles sont élastiques) et "animation-timing-function" qui fait évoluer la vitesse de la rotation en fonction de la position dans le cycle (j'ai utilisé ici ease-in-out, fonction démarrant et se terminant doucement en accélérant au milieu, très utile aussi avec une ficelle élastique!) .

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.