Partage
  • Partager sur Facebook
  • Partager sur Twitter

Tansition hover sur un élément déjà animé

    18 septembre 2021 à 14:21:36

    Bonjour, je vous expliqe mon problème : je sais très bien utiliser les pseudo-classes et les keyframes. Par contre j'ai un problème pour utiliser les deux en même temps.

    En gros, j'ai un élément animé en continu à l'aide d'une keyframe. J'aimerais, en plus de cette animation, ajouter une transition lorsque je le survole avec ma souris. Les deux marchent bien séparément mais lorsque j'essaye de faire les deux en même temps, seule la keyframe fonctionne.

    Auriez-vous une solution ? Je vous remercie d'avance pour l'aide que vous pourrez apporter :) !

    • Partager sur Facebook
    • Partager sur Twitter
      18 septembre 2021 à 15:04:30

      Bonjour,

      Je pense qu'il serait plus simple en ayant un bout de ton code pour pouvoir au mieux t'aider.

      Mais si tu veux j'ai fait ce codepen avec une animation et une pseudo-classe sur la même classe. J'espère que ça pourra t'aider. Autrement n'hésite pas envoyer un bout de code pour voir où le problème peut être.

      https://codepen.io/yuuusuuke/pen/ZEyrgZN

      • Partager sur Facebook
      • Partager sur Twitter
        18 septembre 2021 à 15:48:57

        Salut, faudrait voir ton code.
        • Partager sur Facebook
        • Partager sur Twitter

        La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

          18 septembre 2021 à 15:58:17 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code


            18 septembre 2021 à 16:37:08

            Ayant fait quelques tests je pense que le problème vient de l'utilisation de scale pendant une animation. J'ai l'impression que ça entre en conflit et que les deux ne peuvent pas être utilisé en même temps. Si tu essaies de changer la couleur du background avec la transition tu vois que ça fonctionne. Et si tu mets une animation avec 1 seule itération et que tu hover, tu verras que le scale s'appliquera uniquement l'animation terminée. Donc je ne sais pas s'il est possible de faire fonctionner les deux en même temps, mais si c'est le cas je ne sais pas comment, et des quelques recherches que j'ai faites je n'ai rien trouvé :/

            Voilà le codepen du test que j'essaie d'expliquer x) : https://codepen.io/yuuusuuke/pen/RwgMwVO

            -
            Edité par VincentAllio1 18 septembre 2021 à 16:38:07

            • Partager sur Facebook
            • Partager sur Twitter
              18 septembre 2021 à 17:17:34

              Ne tqt pas, merci pour le temps que tu y a mis et pour avoir détecter la source du problème :)
              • Partager sur Facebook
              • Partager sur Twitter

              Tansition hover sur un élément déjà animé

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown