Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), jeu tétris démo : 8/07/2017

Qui ne connait pas le célèbre jeu de tétris ? Cette animation de 20s entièrement en CSS3 montre un exemple de ce qu'il est possible de faire en CSS. Vous avez ici 2 "briques" (la longue jaune et une en forme de L inversée de couleur cyan) qui défile à la suite.

Pour la 2ème brique, le fait d'effectuer une rotation en CSS modifie le sens du dégradé et des bords des carrés! On pourrait complexifier la chose en faisant disparaitre le div de cet objet à ce moment là et en faire apparaitre un autre de la même brique au même endroit mais tournée de 90 degré... Mais en JavaScript on peut aussi résoudre ça en changeant le contenu du div ayant cette brique.

Dans l'entête de feuille de style pour la partie animation, on a mis le paramètre steps à 1 car on ne souhaite qu'une image par étape de l'animation (décomposée dans les keyframes).

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS.