11-04-2013, 12:02 AM
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.
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:
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:
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?
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;
}
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;
}
}
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?