Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), générique du film Star Wars/La guerre des étoiles (de 1977) : 2/07/2017
Pour cette animation, un des problèmes consistait à cacher ce qui apparaissait en dehors de l'image du ciel étoilé. Cela a pu se faire avec la propriété "overflow : hidden".Il fallait aussi enchainer 2 animations à la suite. Malheureureusement, la seule solution que j'ai trouvée dans une optique de répétition infinie (la méthode delay de l'animation ne fonctionnant qu'une seule fois) était que les 2 animations aient la même durée. Du coup j'ai fait terminer la première animation à 8% des 80s, et démarré la seconde à 8%.
Enfin, il fallait trouver un moyen que le logo starwars disparaisse au bout de 9s. Ce qui a pu se faire en ajoutant la clause "visibility ; hidden" qui peut très bien s'intégrer aux étapes intermédiaires de l'animation (comme tout changement de propriété CSS d'ailleurs!)
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.
Au cours de la bataille, des espions rebelles ont réussi à dérober les plans secrets de l'arme absolue de l'Empire : l'Etoile de la Mort, une station spatiale blindée dotée d'un équipement assez puissant pour annihiler une planète tout entière. Poursuivie par des sbires sinistres de l'Empire, la princesse Leia file vers sa base dans son vaisseau cosmique, porteuse des plans volés à l'ennemi qui pourront sauver son peuple et restaurer la liberté dans la galaxie...