Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), pendule de Foucault 2D : 12/07/2017
Un exemple simple contenant quelques dizaines de lignes seulement (5 propriétés css seulement et 1 seul keyframe), d'un pendule se balançant en 2D. Rien de particulier à signaler, cette animation utilise l'animation sur la propriété rotateZ et des propriétés d'animation "ease-in-out" (pour l'accélération du début et le ralentissement de la fin) ainsi que la clause "alternate" pour répéter l'animation de la droite vers la gauche (symétrie).J'ai utilisé un dégradé circulaire simple pour la couleur de la sphère.
Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS.
Démo CSS pendule de Foucault