Animations CSS3 ou équivalents jQuery?

Hello ,


Pourriez-vous m'indiquer s'il vous parait judicieux d'afficher les animations/transitions CSS3 lorsque disponibles (navigateurs -webkit), et pour tout les autres navigateurs (IE, mozilla, etc.) afficher leur équivalent en jQuery?

En d'autres termes, existe-il des commentaires conditionnels pour cibler les navigateurs à core webkit?

http://demo.marcofolio.net/css3_jquery_animations/Cette page (CSS3 animations
and their jQuery equivalents)[/url] démontre qu'il est possible de réaliser la plupart des transitions CSS3 en jQuery.

Je prends le cas d'un site ou la librairie jQuery n'a pas d'autre utilité que pour ces effets de transitions. Cela vous semble intéressant de n'utiliser cette librairie que si nécessaire?


Merci à tous ceux qui donneront leurs avis.

Julien Vernet a écrit :


En d'autres termes, existe-il des commentaires conditionnels pour cibler les navigateurs à core webkit?

Pourquoi uniquement webkit? D'autres navigateurs sont sur les rangs pour supporter les animations. Tu peux utiliser jquery et Modernizer pour tester si c'est possible en css3.

Les css3 devraient être plus performantes que le js.
Modifié par Patidou (18 Oct 2010 - 10:22)

Julien Vernet a écrit :

En d'autres termes, existe-il des commentaires conditionnels pour cibler les navigateurs à core webkit?

Ta question est a prendre a l'envers. Pour faire ce que tu veux, il faut plutot que tu utilises des conditions pour les autres navaigateurs...
Car -webkit... agit sur le moteur Webkit, donc tes animations CSS fonctionneront, mais pour les faire fonctionner sur les autres, il faut que tu utilises jQuery, sauf sur webkit, car sinon l'animation serait doublée.

Pour info, les animations CSS ne sont compatibles qu'avec Webkit pour le moment. Par contre les transitions CSS sont compatibles Opera 10.5+, Firefox 4+ et Safari/Chrome bien sur. Je ne connais pas le cas de IE9...

@Patidou : Merci pour cette cette petite librairie très intéressante! Cela permet de profiter des dernières technologies web disponibles tout en proposant des "fallback" pour les navigateurs ne supportant par les nouvelles propriétés.

@vdo93 : Oui j'avoue, j'ai formulé ma question à l'envers, comme tu l'a bien compris. Je n'ai aucune idée du rendu d'une animation en double, mais je suppose que ça ne sera pas terrible...

a écrit :
mais je suppose que ça ne sera pas terrible...

Tout dépend de ce que tu fais : prend par exemple une transition de déplacement, les valeurs de la position seront changées par les CSS et par le javascript en même temps. Cela provoquera certainement des "sauts" dans l'animation, du au interpolation différentes.

Hello,

Avis personnel sur la question : Ne pas utiliser les transitions (pour l'instant).
Je m'explique. Si au final leur utilisation implique de rajouter Modernizer et de coder les mêmes animations en jQuery, autant se contenter de la version jQuery.

Les transitions sont sympa en surcouche pour des hover dans le cadre d'une amélioration progressive, mais leur implémentation laisse encore suffisamment à désirer, à mon sens.

A+