Comment bien utiliser les animations en CSS3…

… je crois…
CSS3 c’est bien, c’est neuf, mais comme c’est nouveau on a envie d’en mettre partout à toutes les sauces.
C’est beau tant d’enthousiasme, je suis comme cela aussi, mais j’essaye d’inviter Modération à la partie quand je le peux.

Vous me direz, c’est n’importe quoi ce que je dis sur ma modération, surtout si on regarde ma dernière expérimentation sur les animations en CSS3.
Effectivement, j’ai un peu poussé le bouchon, mais vous constaterez que les informations du slideshow restent malgré tout disponibles sur les navigateurs comme IE 9 qui ne comprennent pas les keyframes apportées récemment par la nouvelle mouture de CSS.

Comment procéder

Je me suis surpris à procéder de la même manière que lorsque je conçois un script JavaScript : réfléchir d’abord au contenu sans JS, puis appliquer une sur-couche JS.

Ici c’est la même chose : penser à l’affichage sans les animations (prise en charge de keyframes), puis appliquer les animations pour les navigateurs qui les comprennent.

.division {
opacity:1;
   animation: fadeinout 3s infinite;
}
@keyframes fadeinout {
   0%, 50%, 100% { opacity: 0; }
   25%, 75% { opacity: 1; }
}

Dans cet exemple basique, on souhaite conserver la visibilité de l’élément si l’animation n’est pas comprise par le navigateur, tout en commençant l’animation par un fade in (une apparition en fondu). C’est pourquoi nous commençons l’animation par une annulation de l’opacité.

C’est ainsi que la légende des images de ce slideshow full CSS3 reste visible pour IE 9, et est initialement cachée sous Firefox, Chrome et Safari.

De manière générale, la question à se poser est la suivante :
« Comment doit se présenter [tel élément] si jamais keyframes n’est pas compris par tel navigateur ? »

Bientôt je ferai un article pour détailler certains points de la réalisation de ce slideshow.

Vous remarquerez la petite hésitation sur le début de l’article. Il s’agit bien d’une réflexion sur ma manière d’utiliser les animations. Il va de soit que cette réflexion reste ouverte !

Bon réveillon à tous !