Linear-gradient

Le problème exposé dans ce sujet a été résolu.

Salut à tous !

Contexte

J’ai mis en place une animation qui fait dérouler vers la gauche un dégradé de couleurs mis en fond d’un before d’un élément au survol de celui-ci.

Comportements attendu et actuel

Comportement attendu : je suis censé ne pas voir de transition au niveau de l’animation du déroulement du dégradé, qui doit être fluide et se faire sans que l’on puisse distinguer de phases.

Comportement actuel : on voit une sorte de transition, "de passage par phase" (c’est compliqué à décrire, il faut le voir pour identifier ça).

Code exécutable minimal et Consignes d’exécution

https://codepen.io/JarsOfJam-Scheduler/pen/dyNWzJQ - pour exécuter, allez sur ce CodePen, et survolez l’élément HTML blanc qui s’affiche sur fond noir.

Explications des sources

  • L’animation glowing fait dérouler le fond (un dégradé de couleurs)

  • L’appel à glowing se fait dans le before de l’élément div.

  • Ce before, initialement non-affiché, contient ce background. Il s’affiche au survol en une demi-seconde (.pulse_animation:hover).

  • La div a pour classe .pulse_animation.

Question

Quand vous survolez l’élément, vous allez voir au bout d’un moment qu’il y a cette brusque transition, ce brusque changement de phase, au niveau de l’animation du dégradé de couleurs.

Je ne comprends pas à quoi c’est dû ni comment corriger cela ?

Recommandations pour vous guider

Vous pouvez retirer le fond blanc de la div pour mieux voir l’animation du dégradé et donc ce bug.

Merci pour votre aide et bon week-end de Pâques à tous !

+0 -0

Salut,

Je pense qu’il te manque une couleur dans ton dégradé. Ça a l’air mieux avec ça :

background:linear-gradient(90deg, #ec0000, #ff9900, #fdcb6e, #ec0000, #ff9900, #fdcb6e, #ec0000, #ff9900, #fdcb6e, #ec0000);

D’ailleurs, ça paraît un peu redondant, tout est en double il me semble.

+1 -0

Salut,

Je pense qu’il te manque une couleur dans ton dégradé. Ça a l’air mieux avec ça :

background:linear-gradient(90deg, #ec0000, #ff9900, #fdcb6e, #ec0000, #ff9900, #fdcb6e, #ec0000, #ff9900, #fdcb6e, #ec0000);

D’ailleurs, ça paraît un peu redondant, tout est en double il me semble.

Aabu

Yep j’avais volontairement mis ça en doublons :D

+0 -0

Coucou ^^

Alors je ne comprend pas trop la question.

Le changement de phase il est normal.


@keyframes glowing {  /* Following is required */
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

À 50%, tu vas dans l’autre sens, donc toutes les 10s ben, tu changes de phase. Tu dis avec ces lignes qu’à 50% tu es à 400% et qu’ensuite tu diminues jusqu’à 0%. C’est ça qui provoque ce que tu décris.

L’idée si tu veux t’en débarrasser, c’est juste de supprimer la ligne 50% et d’aligner sur la période (il se trouve que j’ai l’impression qu’avec 400% c’est aligné O_o et donc que tu as juste à supprimer la ligne des 50%)

Si tu veux l’adoucir, tu règles les pourcentages autour de 50%.

PS: Non sur 400% ce n’est pas aligné si tu regardes bien.

Par-contre comme ça oui:


@keyframes glowing {  /* Following is required */
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}
+2 -0

Il va falloir que tu arrêtes les titres à rallonge. Il faut des titres courts et efficaces. C’est ton texte qui donne les détails.

Sinon c’est tout simplement illisible et tu seras le premier impacté puisque personne n’aura envie de lire le titre

Holosmos

Le titre n’est-il pas censé résumer voire être la question ? C’est obligatoire sur Stackoverflow. Le titre que tu as mis n’apporte rien du tout là

+0 -0

Il va falloir que tu arrêtes les titres à rallonge. Il faut des titres courts et efficaces. C’est ton texte qui donne les détails.

Sinon c’est tout simplement illisible et tu seras le premier impacté puisque personne n’aura envie de lire le titre

Holosmos

Le titre n’est-il pas censé résumer voire être la question ? C’est obligatoire sur Stackoverflow. Le titre que tu as mis n’apporte rien du tout là

HerbeQuiBenchEtSquat

Un titre se doit d’être concis. Les topics sont affichés sur la page d’accueil, tu as 10 mots grand maximum qui sont affichés, donc non, le titre n’est pas une question sauf si elle est courte.
De plus tu rajoute une sorte de catégorisation entre parenthèse par moment, bref en un coup d’oeil on ne peut pas savoir si le topic nous intéresse ou pas.

Ce n’est pas agaçant en soit, mais il faut savoir adapter son style au support. Et globalement sur les forums français à l’ancienne, le titre du topic se doit d’être concis et précis et éviter qu’il ne soit la question que l’on pose. Pourquoi ? Parce que la plupart du temps la question est soit de toute façon reposée dans le texte, soit parce que le titre est souvent pas très visible sur la page du message.

[Fin du HS]

+0 -0

Il va falloir que tu arrêtes les titres à rallonge. Il faut des titres courts et efficaces. C’est ton texte qui donne les détails.

Sinon c’est tout simplement illisible et tu seras le premier impacté puisque personne n’aura envie de lire le titre

Holosmos

Le titre n’est-il pas censé résumer voire être la question ? C’est obligatoire sur Stackoverflow. Le titre que tu as mis n’apporte rien du tout là

HerbeQuiBenchEtSquat

Le titre n’est pas un résumé. C’est un titre. Quelques mots pour cibler le sujet.

Et je vais être très franc avec toi. On a du spam à travers tes titres. Et quand y a du spam, y a des sanctions qui suivent. Et vu le nombre de sujets que tu postes, tu ferais mieux d’accepter les règles communes du forum. Parce que je ne vais pas l’éditer à chaque fois, ce sera beaucoup plus facile

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte