{"id":1769,"date":"2011-12-31T15:00:45","date_gmt":"2011-12-31T14:00:45","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1769"},"modified":"2015-01-18T16:18:56","modified_gmt":"2015-01-18T15:18:56","slug":"comment-bien-utiliser-les-animations-en-css3","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/comment-bien-utiliser-les-animations-en-css3","title":{"rendered":"Comment bien utiliser les animations en CSS3…"},"content":{"rendered":"

… je crois…
\nCSS3<\/abbr> c’est bien, c’est neuf, mais comme c’est nouveau on a envie d’en mettre partout \u00e0 toutes les sauces.
\nC’est beau tant d’enthousiasme, je suis comme cela aussi, mais j’essaye d’inviter Mod\u00e9ration \u00e0 la partie quand je le peux.<\/p>\n

Vous me direz, c’est n’importe quoi ce que je dis sur ma mod\u00e9ration, surtout si on regarde ma derni\u00e8re exp\u00e9rimentation sur les animations en CSS3<\/abbr><\/a>.
\nEffectivement, j’ai un peu pouss\u00e9 le bouchon, mais vous constaterez que les informations du slideshow restent malgr\u00e9 tout disponibles sur les navigateurs comme IE<\/abbr> 9 qui ne comprennent pas les keyframes<\/code> apport\u00e9es r\u00e9cemment par la nouvelle mouture de CSS.<\/p>\n

Comment proc\u00e9der<\/h2>\n

Je me suis surpris \u00e0 proc\u00e9der de la m\u00eame mani\u00e8re que lorsque je con\u00e7ois un script JavaScript : r\u00e9fl\u00e9chir d’abord au contenu sans JS<\/abbr>, puis appliquer une sur-couche JS<\/abbr>.<\/p>\n

Ici c’est la m\u00eame chose : penser \u00e0 l’affichage sans les animations (prise en charge de keyframes<\/code>), puis appliquer les animations pour les navigateurs qui les comprennent.<\/p>\n

.division {\r\nopacity:1;\r\n   animation: fadeinout 3s infinite;\r\n}\r\n@keyframes fadeinout {\r\n   0%, 50%, 100% { opacity: 0; }\r\n   25%, 75% { opacity: 1; }\r\n}<\/code><\/pre>\n
Dans cet exemple basique, on souhaite conserver la visibilit\u00e9 de l’\u00e9l\u00e9ment si l’animation n’est pas comprise par le navigateur, tout en commen\u00e7ant l’animation par un fade in<\/em> (une apparition en fondu). C’est pourquoi nous commen\u00e7ons l’animation par une annulation de l’opacit\u00e9.<\/p>\n
\"\"<\/a><\/p>\n
C’est ainsi que la l\u00e9gende des images de ce slideshow full CSS3<\/a> reste visible pour IE 9, et est initialement cach\u00e9e sous Firefox, Chrome et Safari.<\/p>\n
De mani\u00e8re g\u00e9n\u00e9rale, la question \u00e0 se poser est la suivante :
\n\u00ab\u00a0Comment doit se pr\u00e9senter [tel \u00e9l\u00e9ment] si jamais keyframes<\/code> n’est pas compris par tel navigateur ?\u00a0\u00bb<\/p>\n
Bient\u00f4t je ferai un article pour d\u00e9tailler certains points de la r\u00e9alisation de ce slideshow.<\/p>\n
Vous remarquerez la petite h\u00e9sitation sur le d\u00e9but de l’article. Il s’agit bien d’une r\u00e9flexion sur ma mani\u00e8re d’utiliser les animations. Il va de soit que cette r\u00e9flexion reste ouverte !<\/p>\n
Bon r\u00e9veillon \u00e0 tous !<\/p>\n
\n
Liens utiles<\/h2>\n