Animation CSS ou JS?

[Argorate]

Bonjour,

je viens de prendre le temps de regarder un peu les animations css (j'en profite pour partager le lien http://learn.shayhowe.com/advanced-html-...animations), on dirait qu'on peut faire des trucs assez sympa avec CSS3, mais es-ce plus performant/rapide en CSS ou JS?

Comment choisir quand il vaut mieux l'un que l'autre?

merci.

[niahoo]

Ben si tu peux le faire en CSS3 (c'est à dire que c'est une animation aller ou aller-retour qui ne dépend pas d'une autre variable que (on/off) et que bien sur tu ne supportes que les navigateurs qui supportent CSS3) alors fais-le.

Pour les 90% de cas restant, utilises javascript

[Sephi-Chan]

CSS 3 est plus rapide car accéléré par le navigateur.

[Xenos]

Poc Cloc Poc Cloc Poc Cloc

Me voilà avec mes gros sabots!

Le CSS est fait pour la présentation, le javascript pour le dynamisme.
Comme souligné, CSS sera bien plus rapide que JS.
En cas de dépendance de l'animation à certaines données, tu peux également constituer un CSS "dynamique" (soit en créant une page web, en PHP ou autre, à laquelle tu passes un "GET" et qui te retournes, en sortie, un fichier CSS basé sur ces variables GET; soit en créant un balisage style et en le remplissant via du javascript: en ce cas le javascript fait le dynamisme de la balise style, et le CSS de cette balise fait l'animation).

Dernier élément: les animations fonctionnent comme n'importe quelle règle CSS, ce qui permet d'utiliser les sélecteurs comme :hover ou :target. Ce dernier (je l'adore!) permet d'appliquer un lot de règles CSS à une balise dont l'id est passé dans l'URL. EN d'autres mots, si j'ai une balise avec un attribut "id=machin", et que je dispose d'un lien href=#machin" alors l'animation utilisant le sélecteur "#machin:target" sera lancée quand je cliquerai sur le lien href="#machin".

[Argorate]

"bien plus rapide" tu as des liens de benchmark a passer?

[archANJS]

Pas de benchmark, mais tu peux voir par toi-même ici.

Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox (source)

[Argorate]

Ah oué... du coup c'est clairement mieux de faire un max d'animation en css autant que possible^^

merci pour le lien très intéressant

[archANJS]

Pas de quoi.

Ah oué... du coup c'est clairement mieux de faire un max d'animation en css autant que possible^^

Ouaip, malheureusement il reste un tas d'animations qui ne peuvent être réalisées qu'en Javascript. Dans ce cas, mieux vaut utiliser un framework (ici jQuery, qui est le plus optimisé de ce côté).

[Argorate]

Oui c'est ce que je regardé, on est assez limité dans les events css.

D'ailleurs pourquoi n'ajoute t-il pas les pseudo classe manquante si c'est si optimisé que ça?

EDIT: d'ailleurs comment il lance l'anim sur ton lien depuis un click d'un lien du coup?

[archANJS]

D'ailleurs pourquoi n'ajoute t-il pas les pseudo classe manquante si c'est si optimisé que ça?

Question de logique, j'imagine.

Le CSS est fait pour la présentation, le javascript pour le dynamisme.

Je verrais mal du CSS pour les animations plus complexes (fadeIn, fadeOut, etc) ou la gestion des événements (drag, hold, keyup, keydown, etc) hormis dans le cas du click (ce à quoi se résume son utilisation, tout compte fait).