Test page sur les animations CSS

TOUTES les animations sont 100% CSS,pas de script, ...et pas de gif animé.

Les différents tests :

  1. Lors du chargement de la page...le titre rebondi
  2. Nuages dans le bandeau de titre,Chouette hein?
  3. Test de perspective 3D (rotation dans l'axe Z)
  4. 2 images avec affichage alterné pour impression d'animation
  5. Agrandissement d'image lors d'un clic
  6. Déplacement de Div (en carré)
  7. Div qui tremblent (2 variantes)
  8. Déplacement de Div (en zigzag)
  9. "Bouton dérouleur"
  10. tableau à onglet (pas fini)
  11. menu hover

#3 - flip d'un div

Survolez avec la souris pour la rotation - fonctionne bien avec Chrome, Firefox...marche pô bien!
Il y a du texte dans le div
et même une image

#4 - 2 images alternées

C'est pas hyper convainquant!

#5 - agrandissement d'images

Clic sur l'image - c'est quand même un peu nul!

#6 - Déplacement de div

Mais en voilà une animation utile....nan j'rigole, ça sert à rien!
Il y a du texte dans le div
et même une image

#7 - Div qui tremble

A gauche rotation sans effets particulier, à droite origine de la rotation en bas au centre + animation linéaire
Il y a du texte dans le div
et même une image
Il y a du texte dans le div
et même une image

#8 - Déplacement de div n°2 (zigzag)

Bon ok, encore une qui ne sert pas a grand chose...
Il y a du texte dans le div
et même une image

#9 - Déroule

Clic pour dérouler - animation-fill-mode: both fonctionne très très bizarrement
Cliquer pour + d'infos
Il y a du texte dans le div
et même une image
Un clic a l'exterieur du bouton bleu
ferme ces fenêtres d'information

#10 - Tableau

titre 1

du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte

titre 2

un autre texte un autre texte un autre texte un autre texte un autre texte un autre texte un autre texte un autre texte un autre texte

titre 3

Encore un autre texte et mêmeune image