Quelle technique pour une animation sur mon site?

Bonjour à toutes et tous,

Je suis actuellement en train de bosser sur un nouveau portfolio, et j'ai décidé d'en profiter pour intégrer quelques "animations".

J'ai un dessin vectoriel d'un appareil photo polaroid, et une photo polaroid.
Je souhaite réaliser quelque chose d'assez simple: à l'état 0, il y a juste l'appareil photo polaroid, et au dernier état, l'appareil photo polaroid et la photo qui en est donc sortie.
Le but est donc de créer une animation de la photo, qui sort de l'appareil.

J'ai des doutes quand à la technique la plus judicieuse à utiliser: un gif? du svg? les animations CSS3?
En ce qui concerne le svg et les animations CSS3, j'ai peu de connaissances, mais si besoin, je ne vois pas d'inconvénient à apprendre

Pour info, voici le vectoriel utilisé


Voilà, d'avance merci pour les infos que vous pourrez m'apporter

Pour moi,dans ce cas particulier, le plus simple doit être de faire un gif animé, même si c'est ringard.
C'est facile à faire, tu le fais une fois et c'est bon, Tu ne surcharges pas le web à transférer beaucoup d'images, ni le CPU de l'utilisateur pour exécuter l'animation, etc.
Modifié par PapyJP (09 Feb 2015 - 11:55)

PapyJP a écrit :
Pour moi,dans ce cas particulier, le plus simple doit être de faire un gif animé

Je crois me souvenir qu'un gif animé présente un insuffisance : le setTimeout qui y est utilisé n'est pas respecté dans sa réelle valeur par certains navigateurs (dont IE) lorsque, évidemment récurrent, il est inférieur à 200 millsec, c-à-d 5 img/sec.

Or un gif animé se doit de proposer une séquence d'images à un minimum 15 img/sec (idéalement 25 img/sec) pour ressembler à véritable séquence video (25 ou 24 img/sec).

Cependant, d'un gif animé dont on extrait toutes les images, il est possible de faire défiler les images par javascript, non plus par un setTimeout mais par un setInterval. Egalement d'agir pour un play/pause, une boucle sur séquence ou pas, une autre vitesse (changer la valeur du setInterval), un sens de lecture inversé par quelques boutons "fonctionnalisés" ... etc. Ce qui est absolument impossible avec le gif animé.

@caema : si cela t'intéresse de tenter une petite animation par javascript, j'écrirai ici et plus tard les quelques lignes de code du javascript (sans aucune liste ordonnée ni autre rédaction html de toutes les images de l'animation !). Pour l'avoir rédigé et expérimenté par moi-même, c'est plutôt performant ! et absolument cross-browser (IE v5.5 compris : c'est te dire ...). Il suffira que tu le demandes.

@caema : évidemment, la création-même de toutes les images de ton animation relèvera de ton seul talent graphique ! Une astuce, comme une piste très maligne : avec ScreenCapturer tu enregistres l'activité de ton écran lorsque tu procèdes à un "glisser-déposer" d'une foto-polaroid hors du boitier-camera, dans la fenêtre d'un logiciel de traitement d'images !

@caema : ou bien, pour créer ton animation initiale, utiliser ta web-cam en filmant un "vrai" polaroid en action (1 sec = 25 img suffiront). Puis d'en extraire les 25 img, de les traiter pour un résultat graphique minimaliste, de les enregistrer dans un dossier, et enfin de les activer en ligne par js. Une heure de travail, pas davantage : ce qui est acceptable pour quelque chose d'explicite dont le rendu sur une page web sera parfait.

@caema : d'aucuns te diront que 10% des surfeurs du web ont désactivé le js sur leur navigateur. Bon ! mais c'est un peu marcher dans la nuit sans lampe de poche ...

@caema : ton image .png présente une photo polaroid souple, très souple. Or ce genre de document est rigide, non ? Un effet de perspective est certes efficace : qui pourra te dire comment le mettre en scène par css3, js ... ou svg ? Mais l'appliquer ensuite à chaque nouvelle img devrait être plutôt facile par css3 avec une transition d'opacity (comme une vraie photo polaroid) (mais mais mais attention : chrome css transition = bug indécrottable ... depuis 2011 ! à en croire que les créateurs de chrome ont quelque chose à exprimer à l'encontre du standard css3).
Modifié par senteur_honrable (09 Feb 2015 - 15:23)

L'animation via JS est une alternative à laquelle je n'avais pas pensé je dois avouer...

Ce qui me pose souci au niveau du SVG, c'est le manque de support IE.
Hors, pour un portfolio qui, je l'espère, m'aider à trouver un job, j'ai besoin d'une technologie qui soit lisible sur tous supports.
Les éventuels utilisateurs qui auraient désactivé JS sur le browser, ça me pose moins de souci.

Peux tu m'en dire plus senteur_honrable? Parce qu'entre chrome qui a du mal avec la transition opacity, le support IE défaillant pour le svg, la technique JS m'intéresse grandement

caema,
avant d'aller plus loin, une question s'impose : est-ce que la figuration d'un appareil Polaroid s'impose comme un élément déterminant de ta personnalité dans ton CV ?

Si oui : alors il faudra être particulièrement rigoureux sur l'apparence de l'objet, et son fonctionnement (même stylisé ou allégorique ...).
Si non : alors on peut peut-être s'en passer.
Modifié par senteur_honrable (09 Feb 2015 - 17:59)

Petit hors sujet

@senteur_honrable
Juste pour info par rapport au bug Chrome sur les transitions, je ne sais pas si c'est bien de ça dont tu parles mais celui-ci semble fixé:
http://www.binarymoon.co.uk/2014/02/fixing-css-trans[...]

Freez a écrit :
Petit hors sujet

@senteur_honrable
Juste pour info par rapport au bug Chrome sur les transitions, je ne sais pas si c'est bien de ça dont tu parles mais celui-ci semble fixé:
http://www.binarymoon.co.uk/2014/02/fixing-css-trans[...]

Merci Freez,
malheureusement cela ne fixe rien du tout chez moi.

Même sans -webkit-transform: translateZ(0); mes transitions d'opacity sur chrome ont JADIS fonctionné (il y a 15 jours), qui ne fonctionnent plus du tout avec la nouvelle version de chrome (v.30), avec ou sans -webkit-... et autre machinerie.

Pour le moins, si nous lancions une requête chrome css bug par google-notre-ami, nous pourrions vite comprendre que chrome est instable depuis l'apparition du nouveau standard css3 (en 2011 et depuis 2011) : Environ 1 580 000 résultats (0,32 secondes) ! J'y ai parcouru quelque 20 résultats. En vain.

En définitive, que faut-il en comprendre de cohérent sinon que les créateurs de google chrome s'en amusent royalement : est-ce un enjeu de dominance ? Et à quelle fin ?

Du coup, avant de m'installer dans le compartiment-passager de l'automobile sans chauffeur de google, j'attendrai qu'ils aient fixé préalablement tous ces bugs de css3 (dont même un simple class:hover). Cela ira de leur crédibilité ... et de mon intégrité physique qui risquerait de passer d'opacity:1 à 0 sans transition. Na !

Et même s'il s'agissait en somme d'un profil d'utilisateur : corrompu qu'il faut renouveler, je ne me vois pas avertir un visiteur de mon site web par un hack pour chrome : Attention ! si votre navigateur ne lit pas les transitions css3, veillez à renouveler votre profil et votre face, à vider le cache-cache et à supprimer les cookies et autres brownies.. !

Ceci-cela me laisse vraiment songeur ... sur le crédit mirifique dont dispose actuellement chrome auprès de nous tous, c-à-d le Quidam !
Modifié par senteur_honrable (09 Feb 2015 - 20:40)

Bonsoir,

Personnellement je ferai un sprite SVG et j'animerai son background-position en CSS (ou JS si vraiment …). Regardes un exemple ici http://www.noomiastudio.com/ dans la partie "Ce que nous réalisons pour vous".

Gili a écrit :
Bonsoir,

Personnellement je ferai un sprite SVG et j'animerai son background-position en CSS (ou JS si vraiment …). Regardes un exemple ici http://www.noomiastudio.com/ dans la partie "Ce que nous réalisons pour vous".

Bonsoir Gili,
à l'url que tu renseignes, sur (mon) chrome, le résultat est malheureusement et sensiblement différent de sur (mon) firefox ... C'est bien ce que je relatais ci-avant : chrome présente un bug du css, récurrent et pour l'instant irrémédiable. Et comme quelques milliers d'usagers de chrome : j'aurais pu me dire, ou je me serais dit : -"noomastudio est mal conçu ! alors que de toute évidence, il a été bien conçu ...
Modifié par senteur_honrable (09 Feb 2015 - 23:14)

Bonsoir,

Quel est le bug en question ? Est-il aussi visible sur mac OS ? car je ne vois pas de différence.

Bonsoir
Après avoir lu vos messages, je reste convaincu que DANS CE CAS PRÉCIS la solution gif est la plus efficace.
Concernant les images, je vous rappelle que les 24 images par secondes ont été introduites au cinéma non pas pour fluidifier le mouvement mais pour des raisons de synchronisation avec le son des premiers films sonorisés. Les 25 images par seconde de la TV (en Europe) permettaient de synchroniser le rafraîchissement de l'écran sur la fréquence du courant a 50Hz. Par ailleurs les grands dessins animés de Walt Disney sont en fait à 12 images par seconde: on met deux fois chaque image. J'ai par ailleurs découvert que si vous mettez un Time Interval très faible vous arrivez rapidement à saturer votre ordi.
Avant de vous lancer dans du code JS qu'il faudra ensuite adapter aux différents navigateurs, faites donc un gif, regardez le résultat, et décidez ensuite si ça vaut la peine de chercher plus loin.

Moyennant quoi sur les sites que je gère je fais très peu d'animation, car c'est souvent agaçant pour l'utilisateur de voir des trucs qui bougent à l'écran, et je la fais uniquement en JS...
Modifié par PapyJP (09 Feb 2015 - 23:02)

caema,
je te livre un html qui compile en son sein css et js

Fais un copier-coller de tout ce code, et dans ton éditeur préféré, Enregistrer sous ... (avec le codage UTF-8 !) diaporama.htm (Bloc-notes sous Windows fera l'affaire parfaitement).

Pour les (éventuelles) commandes du diaporama, (car il s'agit en somme d'un simple diaporama dans une première version que tu pourras faire évoluer), tu créeras 3 images telles qu'elles sont renseignées dans le css en .png (pour les background-image) à ta convenance (height:25px;width:25px) des id playpause et sens.

Voici le code :

<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />
<meta name="description" content="Diaporama par javascript et css3 ; dynamique et interactif, automatique ou manuel." />

<title>Diaporama tout simple</title>

<style type="text/css">

body
{font-family:verdana,arial;font-size:1em}

input
{display:inline-block;position:relative;margin:0;padding:0;outline:0 none}

h1
{margin:0;text-align:left;font-weight:normal;color:#555;font-family:verdana,arial}

h2
{margin:0 0 10px 0;text-align:left;font-weight:normal;color:#555;font-family:verdana,arial}

#global
{display:block;position:relative;width:612px;left:50%;padding:10px;margin-left:-316px;text-align:center}

#conteneur
{z-index:1;display:block;position:relative;width:610px;height:430px;margin-left:-1px;margin-bottom:30px;cursor:pointer;border:1px solid #fff}

/* === Les img du conteneur y seront parfaitement centrees === */

#conteneur img
{z-index:1;display:inline-block;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;padding:0px;max-height:100%;max-width:100%}

#commandes
{display:block;position:relative;width:610px;text-align:center;margin-bottom:5px;line-height:2.4em}

#playpause{display:inline-block;position:relative;border:1px solid #000;width:27px;height:27px;cursor:pointer}

#sens{display:inline-block;position:relative;border:1px solid #000;width:27px;height:27px;cursor:pointer}

/* === class affectees aux commandes manuelles === */

.play
{z-index:2;width:27px;height:27px;background-image:url(img/play.png);border:1px solid #000;color:transparent}

.pause
{z-index:2;width:27px;height:27px;background-image:url(img/pause.png);border:1px solid #000;color:transparent}

.sens_avant
{background-image:url(img/fleche_sens.png);margin:0 0 0 4px}

.sens_arriere
{background-image:url(img/fleche_sens.png);margin:0 0 0 4px}

/* === class applique a image_generique === */

.image
{}

</style>

</head>

<body>

<div id="global">

<div id="conteneur">

<img name="image_generique" id="image_generique" class="image" src="img/i1.png" alt="" />

</div>

<div id="commandes">

<input id="playpause" name="playpause" class="pause" type="button" value="" title="play/pause" /><input id="sens" name="sens" class="sens_avant" type="button" value="" title="inverser le sens de lecture" />

</div>

<span style="display:block;text-align:left;padding:6px 12px 18px 6px;border:1px solid #ccc;font-size:0.8em">
<h1>
Diaporama
</h1>
<h2>
par javascript et css3
</h2>
&bull;  Le diaporama peut recevoir des images de dimensions diff&eacute;rentes ; ces images seront toujours centr&eacute;es dans un conteneur.
<br />
&bull; La strat&eacute;gie du javascript est fond&eacute;e sur une image dite g&eacute;n&eacute;rique, &eacute;volutive : i1.png i2.png i3.png ... (n&eacute;cessairement avec la m&ecirc;me extension png, jpg ou gif !).
<br />
&bull; Le javascript se substitue int&eacute;gralement &agrave; une liste ordonn&eacute;e et &agrave; l'int&eacute;gration html de toutes les images du diaporama !
</span>

</div>

<script>

	function Bid(id)  //Ecriture preliminaire pour un raccourci d'ecriture.
{
return document.getElementById(id);
}


var conteneur=Bid("conteneur");	//Elements qui recevront ci-apres leur fonction/evenement propre.
var playpause=Bid("playpause");
var sens=Bid("sens");

Chiffre=1;	//Au demarrage du diaporama, i1.png sera la premiere image.
NombreImages=11;	//Nombre d'images a visionner dans le diaporama ; modifiez ce nombre selon votre propre diaporama.
mon_interval=6000;	//Temps de pause sur image (ici 6 secondes) ; modifiez selon ...

	function Image()
{
document.image_generique.src="img/i"+Chiffre+".png";	//L'image name="image_generique" est ici confinee dans un dossier img
}


	function EnAvant()
{
Chiffre=Chiffre+1;	//On progresse de 1
if(Chiffre>NombreImages)	//Si le diaporama accede au nombre d'images, on boucle sur la premiere.
	{
Chiffre=1;
	}
Image();	//On affecte necessairement la bonne image a chaque modification de Chiffre.
}


	function EnArriere()
{
Chiffre=Chiffre-1;	//On regresse de 1
if(Chiffre<1)	//Si le diaporama accede a la premiere image,
	{
Chiffre=NombreImages;	//on boucle sur la derniere.
	}
Image();	//On affecte necessairement la bonne image a chaque modification de Chiffre.
}


	function Animer()
{
if(sens.className == 'sens_avant' || !sens.className)	//Arguments sur le sens initie par jeu de class.
	{
EnAvant();	//Devancer la latence du setInterval.
defile=setInterval("EnAvant()",mon_interval);	//Ecrire la sequence repetitive.
	}
else if(sens.className == 'sens_arriere')
	{
EnArriere();	//Devancer la latence du setInterval.
defile=setInterval("EnArriere()",mon_interval);	//Ecrire la sequence repetitive.
	}
}


	function StopAnimer()
{
clearInterval(defile);	//Neutraliser la repetition automatique.
}


	function PlayPause()	//Interrompre en va-et-vient.
{
if(playpause.className == 'play' || !playpause.className)	//Argument selon la marche ou l'arret par jeu de class.
	{
playpause.className = 'pause';
StopAnimer();
	}
else if(playpause.className == 'pause')
	{
playpause.className = 'play';
Animer();
	}
}


	function EnArriereEnAvant()	//Permuter en va-et-vient.
{
if(sens.className == 'sens_arriere' || !sens.className)	//Argument selon le sens de lecture par jeu de class.
	{
sens.className = 'sens_avant';
StopAnimer();
EnAvant();	//Devancer la latence du setInterval.
if(playpause.className == "play" || !playpause.className)
		{
defile = setInterval("EnAvant()",mon_interval);	//Appliquer l'interval repetitif en lecture avant.
		}
	}
else if(sens.className == "sens_avant")
	{
sens.className = 'sens_arriere';
StopAnimer();
EnArriere();	//Devancer la latence du setInterval.
if(playpause.className == "play" || !playpause.className)
		{
defile=setInterval("EnArriere()",mon_interval);	//Appliquer l'interval repetitif en lecture arriere.
		}
	}
}


sens.onmousedown=function(){EnArriereEnAvant()};	//Affecter aux elements leur fonction propre par evenement manuel.
playpause.onmousedown=function(){PlayPause()};
conteneur.onmousedown=function(){PlayPause()};

window.onload = setTimeout(function(){PlayPause()},6000);	//Le diaporama demarre automatiquement apres 6s au chargement de la page 

</script>

</body>

</html>

Le script est conçu pour 11 images, mais tel que cela est renseigné dans ce script, leur nombre peut être modifié.

Le temps de pause sur image y est de 6 secondes. Or s'il devait s'agir d'une véritable (et fluide) animation, le setInterval serait par exemple de 40, non plus de 6000. C-à-d 25 img/sec.

Il faut alors bien comprendre qu'autant de secondes d'une belle animation équivalent à d'autant d'images x 25 ! Et, outre le travail graphique que cela représente (), un préchargement de toutes les images est absolument nécessaire : un script additionnel très rudimentaire ferait alors notre affaire, sous réserve que cela n'encombre pas excessivement le cache du navigateur chrome (oui chrome, encore une fois chrome).

Voilà qui pourra t'orienter un peu.
Modifié par senteur_honrable (09 Feb 2015 - 23:23)

PapyJP a écrit :
Bonsoir
Après avoir lu vos messages, je reste convaincu que DANS CE CAS PRÉCIS la solution gif est la plus efficace. (...)

PapyJP, je maintiens qu'une .gif animée que l'on souhaite être fluide sur TOUS les navigateurs ne peut être configurée à plus de 5 ou 6 images par seconde. Mais à ce frame/rate, elle apparaît saccadée ... Et ce n'est pas le but du jeu.

D'autre part, notre persistance rétinienne n'a rien à voir avec Disney ! 25 img/sec se jouent de la persistance, s'accommodant de la capacité du flux néfrétique, de l'oeil au cerveau. Il y aurait encore mille choses à dire sur les phénomènes de l'image animée, dont celui du flou (sur une frange semi-transparente plus ou moins large) qui peut signifier soit une différence de plans (un seul focus nous est possible car nous ne sommes pas le caméléon), soit un mouvement (sans focus ni nécessaire ni possible, le mouvement alerte notre instinct de prédation). Or, les cams les plus sophistiquées prétendent aujourd'hui combattre le flou : le résultat est paradoxalement une animation saccadée (inouï, n'est-ce pas ?). Donc le flou est très important, selon que l'on veuille évoquer l'éloignement, et le mouvement (en relatif ou en absolu, ce qui n'est pas tout à fait la même chose).

Un ordi dualCore accepte volontiers le setInterval à 40, sans que le CPU ne fasse disjoncter le thermostat de la machine ! en fonction des dimensions de l'animation (width:600px;height:450px sont acceptables).

Quant au script que je propose, j'atteste qu'il est cross-browser (dont IE v.5.5 !)
Modifié par senteur_honrable (10 Feb 2015 - 00:37)

@senteur_honrable
je pense que sur beaucoup de points tu as raison, mais je ne crois pas que sortir tout cet arsenal de technologie soit la chose appropriée dans le cas qui nous concerne. C'est comme si on utilisait la relativité d'Einstein pour calculer la trajectoire d'une boule de pétanque.
Quant à parler de dual core, je connais peu d'utilisateurs qui en possèdent un, mais il est vrai que tu es un spécialiste de l'image, comme tu nous l'as récemment montré. En tant que petit fils d'un compagnon du Tour de France dont le " chef d'œuvre" était un escalier en spirale, j'ai été bluffé par ton récent message illustré.
Il est exact que l'animation par JS dépend beaucoup du navigateur et de la plateforme sur laquelle ça tourne. Pour moi c'est une raison supplémentaire pour ne pas se lancer dans de tels développements quand ce n'est pas indispensable.
Je vais regarder si je peux utiliser intelligemment ton script dans mes pages. Les mécanismes que j'ai développés n'ont l'air de marcher à peu près correctement que sur PC et Mac. Je perds mes effets de fondu enchaîné sur iPad, et le mouvement qui a l'air fluide sur PC a l'air saccadé sur d'autres plateformes. Je pense qu'en plus que la fréquence de raffraichissement il y a également un problème de rémanence de l'écran.
Je crois que le succès du flash vient de ce qu'on a de meilleurs résultats à coût reduit, sauf que Apple est en bisbille avec eux (depuis les premières imprimantes PostScript à la fin des années 1980) et que les autres semblent suivre le mouvement, sans doute pour les mêmes raisons (prix excessif de la licence), ce qui fait que le charter de mon projet étant de me passer de Flash pour faire tourner les animations. Et puis il y a des nouveautés dans CSS3, c'est à dire que c'est le navigateur qui implémente les transitions, normalement de façon plus efficaces que du JS.

Bonne nuit.
Modifié par PapyJP (10 Feb 2015 - 00:38)

@PapyJP,
bonne nuit.

@senteur_honrable je me demande bien quelle version de Chrome vous utilisez et sur quel OS, testé sur Mac OS et Windows XP ( ) et les animations de noomiastudio fonctionnent parfaitement.

Par rapport à votre problématique de fluidité, pourquoi ne pas utiliser requestAnimationFrame dans ce cas là ? C'est la meilleure solution à ce jour pour assurer de la fluidité aux animations (bien sur penser à faire un fallback setInterval/Timeout pour les navigateurs plus anciens).

Explications et exemples ici.
Modifié par Freez (10 Feb 2015 - 10:06)

Pour info: un vieux gif animé du millénaire précédent!
http://www.icone-gif.com/gif/personnages/pegase/pegase004.gif
on n'est pas obligé de le faire tourner continuellement en boucle.

@Freez, à l'heure actuelle je ne sais pas encore pourquoi "mon" chrome (v.30) est devenu rétif à toute transition du css3 (!). Et je crois que personne ne le sais, avec beaucoup de "chrome" sur Terre depuis 2011 ...

@PapyJP, je me suis intéressé à ton dernier post. J'ai donc visité ton site http://www.bonieux.com/
Voici ce que j'ai pu observer :

-Préliminaire
Le CPU, de l’acronyme anglo-saxon Central Processing Unit, désigne l’unité de traitement ou microprocesseur principal d'un ordinateur. Il est soumis à divers paramètres tels que la cadence, la fréquence, la mémoire cache, eux-mêmes assujettis à la finesse de gravure et au nombre de transistors gravés lors de l’usinage de cette puce composée de silicium.

Chargé de l’exécution des instructions des programmes, le CPU est l’élément prédominant d’une configuration informatique. Sa puissance se mesure en Flops, soit le nombre de calculs à virgule flottante effectués en une seconde.

-Observation
Avec ProcessExplorer qui calcule (entre autres) le CPU, la page d'accueil du site en question tourne autour de 40% des capacités de mon ordi. Ce qui est énorme !

L'ordi de l'expérimentation : HP Pavilion/dualCore/année de fabrication : 2005. Par rapport à ce que l'on fabrique aujourd'hui pour le grand'public, mon ordi est certes un ancêtre "plutôt véloce et alerte" mais effectivement dépassé.

-Documentation par requête google sur ProcessExplorer
https://www.google.fr/search?q=process+explorer&ie=utf-8&oe=utf-8&channel=fs&gws_rd=cr, ssl&ei=XM7ZVO-zNsG0UI_sg-gO

-Conclusion
De fait, il est judicieux de s'inquiéter de la consommation de ressource CPU. A défaut, et en cas d'excès de cette consommation, un visiteur aura le réflexe de fuir le site en cours et de ne jamais y revenir.

-Autre exemple
J'ai également lancé ProcessExplorer pour analyser le CPU d'une page que j'ai créée où défile en boucle une animation de 177 images W464px H304px, au setInterval de 40 = 25 img/sec. L'animation est parfaitement fluide sur IE, FireFox et Chrome, Safari, Opera. En substance, le script qui anime ces images est le même que celui que je présente ici, plus haut dans le topic.

Le CPU tourne autour de 15%. Ce qui demeure vraiment raisonnable ... tandis que la moindre video .flv ou .mp4 consomme (avec du son) jusqu'à 80%, jusqu'à en crasher mon pc ! (note: le son n'est pas le maudit responsable).
Modifié par senteur_honrable (10 Feb 2015 - 11:30)

@senteur_honrable v30? Ce n'est pas forcément étonnant que vous ayez des problèmes vous n'êtes pas à jour de 10 versions...
Concernant requestAnimationFrame qu'en pensez vous?

Freez a écrit :
@senteur_honrable v30? Ce n'est pas forcément étonnant que vous ayez des problèmes vous n'êtes pas à jour de 10 versions...
Concernant requestAnimationFrame qu'en pensez vous?

Edit ma version : je suis effectivement en chrome v.40 ! Mais la version de chrome, quelle qu'elle soit depuis 2011 () est instable pour le css3. Authentiquement instable. Il faudra bien admettre que chrome a mené une campagne de conquête plutôt effrénée et décérébrante : quitte à briser finalement notre beau Rêve. O Propagande, Mythologie et Légende, gracieuses Nymphes des Temps modernes ... et du web.

Concernant requestAnimationFrame qu'en pensez vous? : j'y cours, j'y cours ...

===========

Je suis de retour de requestAnimationFrame : j'ai le sentiment que ma préoccupation est fort semblable à la leur ().

Reste à démontrer que leur démarche, pour être d'un abord plus complexe, offrira une solution autrement plus performante que la mienne. Je ne sais pas encore mais je m'y intéresserai de près.
Modifié par senteur_honrable (10 Feb 2015 - 14:37)