Animation CSS ou JS?

[niahoo]

bon mais sur l'event mouseover de mon lien, je lui fais quoi au body ? Je peux simplement lui ajouter une classe et je peux déclarer mes transitions dans la définition de la classe dans le CSS. Ou bien on ne peut utiliser que des pseudo-machins comme :hover, :target, etc. ?

[Argorate]

pour le cas d'une animation from => to (pour changer la couleur du body par exemple), on définit une classe qui applique cette animation de changement, puis en JS on ajoute juste la classe en question au body?
(je répond mais j'essaie de comprendre en même temps que toi niahoo^^)

HS: super le css4, du coup le js servira presque plus à rien :p
Sauf pour les canvas

[Xenos]

Tu peux lui ajouter une classe, et dans le CSS, définir les valeurs à changer (background-color par exemple).
Dans les règles CSS appliquées au "body" en temps normal, il suffit alors d'ajouter une règle de transition pour que le CSS fasse automatiquement un "fondu" depuis le background-color de départ (celui que le body possède normalement) et le background-color désiré lors de l'évent.

body

{

background-color:green;

transition: background-color 1s ease-out;

}

body:hover

{

background-color:red;

}

Ainsi, le background du body est, par défaut, vert. Quand la souris passe sur ce body, le pseudo-sélecteur ":hover" est vérifié, et donc le sélecteur "body:hover" est vrai. Alors, les règles associées à ce sélecteur s'appliquent. Ce sélecteur a été déclaré après le "body" simple, donc ses règles (celles du body:hover) remplaceront les règles de "body" simple. De fait, le background-color sera définit à "red". Mais la règle "transition, background-color" est toujours valide (elle n'a pas été altérée par les règles "body:hover" qui ne contient pas de règle "transition"). Donc, le navigateur va faire une transition lors du changement de la valeur de background-color: celui-ci va passer progressivement de la valeur nominale (green) à la nouvelle valeur (red) introduite par les règles du sélecteur "body:hover": l'arrière-plan fait un fondu du vert au rouge.

Mais rien n'empêche de laisser tomber le "hover" et d'utiliser javascript:

body.onmouseover = function () {body.class = "helloWorld"; };

body

{

background:green;

transition:background-color 1s ease-out;

}

.helloWorld

{

background:red;

}

En ce cas, le même système s'applique: les règles du sélecteur "body" simple sont appliquées, et l'arrière-plan du body est vert. Quand le javascript le demande (onmouseover), le body se voit attribuer la classe "helloWorld". Celle-ci, comme la "body:hover" précédente, va définir de nouvelles règles CSS: le background-color doit passer à "red". Mais la règle "transition" est toujours active, donc, le navigateur fait un fondu entre le background-color:green initial (issu du "body" simple) et le background-color:red issu des règles de ".helloWorld".

Pour le CSS4, il permettrait de sélectionner les noeuds parent, mais pas les noeuds "siblings" (frères?): il ne sera pas possible d'avoir une div contenant des liens et de faire en sorte que, au passage de la souris sur un lien, les autres se voient appliquer des règles CSS données (ou alors, il faudra des sélecteurs CSS exhaustifs, c'est à dire des lots de règles à appliquer au passage de la souris sur le 1er lien, et un autre lot de règles pour le 2nd, puis pour le 3e etc).

Dans le cas d'une animation @keyframes, car l'animation "from to" n'est qu'une forme de @keyframes, on peut très bien utiliser une animation @keyframes suivante:

@keyframes heading-bar-events-anim-19

{

	1%

	{

		opacity: 			1.0;

		z-index:			1;

	}

	4%

	{

		opacity: 			1.0;

		z-index:			1;

	}

	6%

	{

		opacity: 			0.0;

		z-index:			0;

	}

	99%

	{

		opacity: 			0.0;

		z-index:			0;

	}

}

Celle-ci n'a pas de "from/to", qui ne sont en fait que les aliases respectifs de "0%" et "100%".
Donc, une animation "@keyframes" n'est jamais qu'un ensemble de règles qui doivent être appliquées à un moment donné de la flèche du temps. La flèche du temps est définie par la valeur de animation-timing-function, par l'horloge du navigateur (ou le timestamp du PC si on préfère) et par la valeur de la règle animation-duration. En fonction de la position actuelle sur cette flèche du temps, position exprimée en %, certaines règles CSS vont être appliquées. La flèche peut boucler sur elle-même, ou faire un aller-retour avant de boucler sur elle-même (voir animation-direction). En d'autres mots, l'animation peut être lue uniquement dans un sens (arrivé à 100%, on repart à 0% pour une nouvelle animation), ou dans un sens puis dans l'autre (arrivé à 100%, on repart dans l'autre sens, vers 99% puis 98%...jusqu'à 0% où on repart alors dans le sens normal, 1% puis 2%...)
Par défaut, entre deux "frames" de l'animation (entre deux % définissant des règles CSS), le navigateur fait une transition qui suit la flèche du temps (voir animation-timing-function: si la flèche du temps est linéaire "linear" alors la transition est linéaire si la flèche du temps est ease-out/ease-in alors la transition suit la courbe de cette fonction de fade-out/fade-in). Donc, il n'est pas besoin de définir une valeur pour "transition" si on utilise un @keyframes.

Pour appliquer le keyframes, il faut utiliser les règles CSS animation-*. Ces règles sont donc à mettre dans un bloc de règles CSS, lui-même affublé d'un sélecteur. Ce sélecteur peut alors soit être de type ":hover", par exemple "body:hover" et les règles @keyframes seront exécutées dès l'instant où ce sélecteur sera vrai, soit ce sélecteur est une classe et la classe est appliquée à l'objet par le javascript, suivant les évènements qu'on souhaite.

Cela répond-il plus en avant aux questions posées?

[niahoo]

cool je vais tester ça

merci

[Argorate]

Tu expliques super bien !

Du coup, je suis content j'avais bien trouvé la bonne réponse^^

Tu devrais faire des tutos à épinglé sur jeuweb, je trouve que tu es très clair et complet, c'est un plaisir

[Ter Rowan]

Tu expliques super bien !

Du coup, je suis content j'avais bien trouvé la bonne réponse^^

Tu devrais faire des tutos à épinglé sur jeuweb, je trouve que tu es très clair et complet, c'est un plaisir

Plus hein, je pense aussi

[Xenos]

Merci
Je comptais en pratique les poster sur Reinom en 1er, en licence CeCIILL ou assimilée (c'est à dire open-source donc repostable ici). N'ayant pas encore terminé le site reinom, ces tutoriaux sont en attente.

[Plume]

HS: super le css4, du coup le js servira presque plus à rien :p
Sauf pour les canvas

Si tu dis ça, c'est que ton utilisation de JavaScript est encore sommaire. JavaScript est encore le seul moyen de gérer les évènements, de gérer des données, de manipuler le DOM,… Une RIA, ça se développe pas en CSS.

"siblings" (frères?)

C'est ça. Bien que ce soit plus littéralement, frères et sœurs. La traduction serait fratrie. C'est un raccourci pour brother and sister.

Pour le CSS4, il permettrait de sélectionner les noeuds parent, mais pas les noeuds "siblings" (frères?): il ne sera pas possible d'avoir une div contenant des liens et de faire en sorte que, au passage de la souris sur un lien, les autres se voient appliquer des règles CSS données (ou alors, il faudra des sélecteurs CSS exhaustifs, c'est à dire des lots de règles à appliquer au passage de la souris sur le 1er lien, et un autre lot de règles pour le 2nd, puis pour le 3e etc).

C'est à moitié vrai. Aujourd'hui, en CSS, un élément peut être conscient de ses frères mais seulement celui qui suit. http://jsfiddle.net/adrieng/YMZEX/2/

Sinon, pour faire ce que tu proposes, il y a une astuce tordue mais qui fonctionne : http://jsfiddle.net/adrieng/Kdcup/

[Xenos]

J'entendais "pas les noeuds frères du noeud parent" (donc, les oncles), car oui, il existe des sélecteurs pour les frères cadets.
Et il est exact de dire que, si on veut toucher au DOM, le javascript est la solution la plus répandue, CSS en étant incapable (d'ailleurs, au sujet du "quand utiliser CSS ou javascript", on peut le résumer par "si je change le sens de la page je dois alors changer le DOM donc je fais du javascript, mais si ce que je veut changer ne modifie pas le sens de la page, alors je ne touche pas au DOM et je passe par CSS"). Donc les RIA, qui touchent au DOM, requièrent effectivement javascript.

[Argorate]

C'était une boutade.

Sinon pas mal l'astuce !