• CSS>Animations -
  • Publié le :  | Modifié le :

Animation en CSS3

Article sur les divers types d'animations en CSS3.

La référence.

Pour un petit tour d'horizon des possibilités, voir animate.css. Vous pouvez télécharger le .css pour avoir tous les exemples possibles. C'est déjà une bonne base pour commencer à expérimenter ses propres animations.

Pour les amateurs de JQuery un autre site tympanus.net. Une très bonne source d'inspiration.

Le positionnement en JavaScript.

La première des considérations n'est pas l'animation en elle-même, mais le cadre de votre site, car vous aurez besoin de savoir comment et où positionner votre animation.
Deuxième point, vous serez obligé d'utiliser du JavaScript pour recharger les animations et trouver le positionnement de vos éléments.
Voici un petit script JavaScript pour trouver la position de l'élément ciblé:

  1. // fonction qui donne la position de l'élément selon le bord  haut à gauche
  2. // var element l'élément ciblé
  3. // retourne  xPosition (à gauche)  et yPosition (en haut)
  4. function getPosition(element){
  5.     var xPosition =0;
  6.     var yPosition =0;
  7.   
  8.     while(element){
  9.         xPosition +=(element.offsetLeft - element.scrollLeft + element.clientLeft);
  10.         yPosition +=(element.offsetTop - element.scrollTop + element.clientTop);
  11.         element = element.offsetParent;
  12.     }
  13.     var z ="x:"+ xPosition+", y:"+ yPosition;
  14.         return z;
  15. }
  17. function Ou(){
  18.         Pinfo.innerHTML = getPosition( document.getElementById('site-content'));
  19. }
  20. // pour rafraichir tout les 50
  21. window.onload = setInterval(function(){ Ou();},50);
  22. window.onresize =this.resize;// pour setInterval indispensable

Si vous êtes sur PC tester en redimensionnant le navigateur:

Comme pour mon site si le vôtre est centré, il devient facile de récupérer la position à droite puisque c'est la même distance qu'à gauche. Donc la valeur right: -xPosition.

Rejouer l'animation sur un clique en JavaScript.

Au cas où l'animation en CSS3 ne se joue qu'une seule fois, il faudra la "reloader" en JavaScript.
Pour comprendre le .bind(), voir Variables via un Listener.
Il suffit d'utiliser un .onmousedown et de vider le .style.animation.

  1. // Un listener sur le clique
  2. BTNba2.addEventListener("click", move.bind(this,'33.333'),false);
  3. //reloader l'animation en supprimant le style de l'animation
  4. BTNba2.onmousedown =function(){Slider.style.animation ="";}
  5. // L'animation faire glisser de la droite vers la gauche de tant de %
  6. // var Slider l'élément que l'on veut animer
  7. // .style.transform pour modifier le style via animation CSS3
  8. function move(b, evt){
  9.         evt.preventDefault();
  10.         Slider.style.transform ="-webkit-translate(-"+b+"%, 0%)";
  11.         Slider.style.transform ="translate(-"+b+"%, 0%)";
  12. // L'animation est dans le fichier CSS on l'appelle depuis le JavaScript.
  13.         Slider.style.animation ="fadeOut 0.8s";
  14. }

Pour l'exemple qui suit, cela n'est pas utile, mais si vous jouez une animation CSS3 dans le CSS depuis la fonction JavaScript, alors il faudra se servir de cette astuce. Mais vous pourrez le tester je les ai laissés en commentaires dans le fichier.


Les deux exemples qui suivent son tirés de Google design> Patterns > Navigational transitions.

1) Slider article(Sibling to sibling).

Pour la source d'inspiration voir Google Navigational transitions: section Sibling to sibling.

L'exemple qui suit est basé sur un site qui s'affiche sur toute la surface du navigateur, voir ICI (nouvel onglet). Il faut cliquer sur les liens article 1, article 2, article 3. Le code est complexe faites un clique droit afficher la source, le JavaScript et le CSS3 sont dans la page html. C'est complexe, car l'exemple s'insère dans un document sous forme de site. Car je préfère un exemple complexe, qu'un bout de code, qui lorsqu'on le met en œuvre ne fonctionne pas avec son site.

Précision.

Le site s'affiche en 100% il est scrollable en hauteur, le conteneur qui coulisse a une taille en (NB article* 100%), les articles on une largeur de 100% pour s'afficher sur tout le document. Le diviseur dans le JavaScript et après la virgule, car sinon les articles ne sont pas bien calés sur les bords. Prenez attention aux overflow, width sur les containers, car cela peut tout changer.

2) Sous-menu en pleine page(Parent to child).

Pour la source d'inspiration voir Google Navigational transitions: section Parent to child.

Pour l'exemple voir ICI (nouvel onglet). L'exemple est largement commenté, clique droit pour affciher la source. Cliquer sur le lien Ubuntu, c'est le seul qui contienne un sous-menu.

Précision.

Cette animation utilise la propriété CSS clip, elle n'est pas reconnue par le navigateur android par défaut, jusqu'a 4.4.

La fermeture du sous-menu est "directe" car à cause du redimensionnement et du changement de taille de police, il m'est impossible de retrouver les coordonnées de départ en l'état. Puisque le site est "responsive", il s'adapte selon la taille de la fenêtre. Je me suis limité à une seule animation, puisqu'avec les navigateur qui utilise le préfixe -webkit- les animations ne se jouent pas en série(Pas trouvé si cela vient de mon code où pas?).
Vous devrez jongler avec le code JavaScript et le CSS. Pour le CSS les classes .btnscale(tag li parent) .btnbig(tag li parent grand) .btnbig2(tag li parent grand en resize) .btnbig .menunavul2(tag ul sous-menu) .btnbig2 .menunavul2(tag ul sous-menu en resize) sont celles qui doivent retenir votre attention.

En conclusion

Grâce au CSS3 les possibilités d'animations sont grandes et permettent de rendre votre site plus dynamique. Le JavaScript permet d'avoir un contrôle encore plus poussé.