10-04-2013, 03:22 PM
Javascript peut se charger de lancer l'animation, en appliquant une classe à un objet, et CSS s'occupe d'animer les objets d'une classe donnée. L'animation n'est donc que gérée par CSS, son lancement (qui ne fait pas partie de l'animation à mon sens car avant de lancer l'animation, il n'y a pas d'animation) étant du ressort du javascript.
Avec translate, oui. Ou tout simplement avec top/right/bottom/left + transition, dans un @keyframe (animation) ou non.
CSS permet la présentation, ce qui inclus effectivement agrandir, tourner, mais aussi bouger, déplacer, étirer...
Ce que CSS ne gère pas, et qui est du ressort du javascript, c'est l'évènementiel, c'est à dire la condition qui va lancer l'animation (lancement qui se fait en appliquant une classe donnée à l'objet par exemple).
Après, il est possible d'utiliser, comme indiqué plus en amont, le pseudo-sélecteur ":target", qui permet d'appliquer une règle CSS si et seulement si l'ancre de la page (ce qu'il y a apres le "#" dans une URL) renvoie à l'objet du sélecteur (exemple: #id:target { } définit des règles qui ne seront appliquées que si l'objet #id est l'ancre utilisée; ou encore, .classe:target {} est appliqué si et seulement si l'objet ciblé par l'ancrage est de class "classe").
Enormément d'animations peuvent se faire via CSS, puisque celui-ci gère le PRS 3D (Position Rotation Scale indépendamment dans chacune des 3 dimensions). Une très très grande majorité (pour ne pas dire toutes) les animations peuvent se décomposer en éléments P ou R ou S, et "il n'y a plus qu'à" assembler ces éléments pour faire l'animation. Par exemple, les animations de personnages 3D de jeux vidéos sont basés sur le PRS (pour les JV qui datent un peu, environ 7 ans).
Avec translate, oui. Ou tout simplement avec top/right/bottom/left + transition, dans un @keyframe (animation) ou non.
CSS permet la présentation, ce qui inclus effectivement agrandir, tourner, mais aussi bouger, déplacer, étirer...
Ce que CSS ne gère pas, et qui est du ressort du javascript, c'est l'évènementiel, c'est à dire la condition qui va lancer l'animation (lancement qui se fait en appliquant une classe donnée à l'objet par exemple).
Après, il est possible d'utiliser, comme indiqué plus en amont, le pseudo-sélecteur ":target", qui permet d'appliquer une règle CSS si et seulement si l'ancre de la page (ce qu'il y a apres le "#" dans une URL) renvoie à l'objet du sélecteur (exemple: #id:target { } définit des règles qui ne seront appliquées que si l'objet #id est l'ancre utilisée; ou encore, .classe:target {} est appliqué si et seulement si l'objet ciblé par l'ancrage est de class "classe").
Enormément d'animations peuvent se faire via CSS, puisque celui-ci gère le PRS 3D (Position Rotation Scale indépendamment dans chacune des 3 dimensions). Une très très grande majorité (pour ne pas dire toutes) les animations peuvent se décomposer en éléments P ou R ou S, et "il n'y a plus qu'à" assembler ces éléments pour faire l'animation. Par exemple, les animations de personnages 3D de jeux vidéos sont basés sur le PRS (pour les JV qui datent un peu, environ 7 ans).