Sites


CSS3

Approche des animations CSS

Depuis CSS3, il est possible de coder des animations variées par l'utilisation de quelques propriétés bien choisies. Par rapport aux animations Flash elles auront l'avantage de ne pas nécessiter de plug-in car elles seront gérées nativement par le navigateur. Internet Explorer a été le dernier à s'y mettre, mais depuis sa version 10, les choses semblent en place. Enfin par rapport aux animations en javascript ou Jquery,   elles seront beaucoup plus standard et surtout rappelons nous que les navigateurs permettent une désactivation du javascript.

Enfin, CSS est un langage bien plus simple à apprendre que Javascript, elles seront plus simples à mettre en oeuvre, limiteront les risques de mauvaises implémentations et laissent le navigateur gérer les transitions au meilleur de ses performances. 

Transitions CSS

Les transitions CSS permettent de modifier partiellement un objet pour qu'il passe d'un état à un autre en jouant sur la valeur de ses propriétés CSS actuelles. Les transitions CSS seront particulièrement utilises pour placer un retro-action visuelle au survol d'un bouton par exemple. 

Les transitions sont donc plus simples à mettre en place que les animations qui permettront de jouer sur des durées, modifications et étapes plus variées, mais elles sont aussi beaucoup plus simples à mettre en oeuvre en ce qu'elles sont réellement, au niveau du code, très proche des autres propriétés CSS. Elles s'effectueront par le biais de 4 propriétés principales

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Si ces possibilités ne suffisent pas il faudra donc passer aux animations.

Animations CSS

Les animations permettent en effet d'aller beaucoup plus loin dans la complexité, et on voir apparaître de vrais petits dessin-animé fait en CSS. Si les connaissances acquises en transitions peuvent être utiles, il n'en reste pas moins que les animations se font un peu différemment. 

Il y a donc une série de propriétés qu'il faudra avoir en tête pour régler l'animation :

animation-delay
permet de définir le temps d'attente avant le début de l'animation
animation-duration
permet de définir la durée de l'animation
animation-name
attribut un nom à l'animation de manière à pouvoir y faire appel à partir d'autres éléments 
animation-iteration-count
permet de spécifier le nombre de répétition de l'animation

Certains autres propriétés seront aussi utilisées dans certains cas animation-direction, animation-play-state, animation-timing-function, animation-fill-mode .

En général, les états de l'animation seront définies à l'aide d'images-clés qui seront enregistrées avec la  règle @keyframes. L'utilisation de ces règles améliore grandement la réutilisabilité des animations créées et facilite leur imbrication.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.