The CSS hover effect for text backgrounds is acting unexpectedly when the mouse moves away

Question

The CSS hover effect for text backgrounds is acting unexpectedly when the mouse moves away

I’ve added a hover effect to an h1 tag (check out the code and demo below), but it’s acting strangely when I move the mouse away, almost flickering before returning to its original state.

Any suggestions on how to smoothly transition back to its original color, just like it fades in on hover?

Thank you for your help!

Here is the codepen link

h1 {
        transition: 0.5s;
      }

      h1:hover {
        background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
        background-size: 400% 400%;
        color:transparent;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
      }

      @-webkit-keyframes Gradient {
          0%, 100% {
              background-position: 0 50%
          }
          50% {
              background-position: 100% 50%
          }
      }

      @-moz-keyframes Gradient {
          0%, 100% {
              background-position: 0 50%
          }
          50% {
              background-position: 100% 50%
          }
      }

      @keyframes Gradient {
          0%, 100% {
              background-position: 0 50%
          }
          50% {
              background-position: 100% 50%
          }
      }

<h1>The Title</h1>

css css-animations linear-gradients

Answer 1

Answer №1

The issue lies in the attempt to blend an animation with a transition, which does not function as expected. Introducing a transition does not guarantee a smoother animation. Essentially, transitions cannot be added to animations.

Considering that you have set the duration of the animation to 15s on hover, it seems unnecessary to include the infinite loop in this scenario since no one would likely hover for more than 15s. Therefore, transforming this into a transition will produce the desired smoothness.

I opted to incorporate black color into the gradient for our initial state. Through utilizing a transition, we can achieve half of the original animation effect and at the conclusion, you will experience a 7s duration, which is suitable for a hover effect:

h1 {
  transition: 7s;
  background: 
    linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB,#000);
  background-size: 400% 400%;
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 0;
}

h1:hover {
  background-position: 100% 50%;
  
}

<h1>The Title</h1>

Answer 2

The issue lies in the attempt to blend an animation with a transition, which does not function as expected. Introducing a transition does not guarantee a smoother animation. Essentially, transitions cannot be added to animations.

Considering that you have set the duration of the animation to 15s on hover, it seems unnecessary to include the infinite loop in this scenario since no one would likely hover for more than 15s. Therefore, transforming this into a transition will produce the desired smoothness.

I opted to incorporate black color into the gradient for our initial state. Through utilizing a transition, we can achieve half of the original animation effect and at the conclusion, you will experience a 7s duration, which is suitable for a hover effect:

h1 {
  transition: 7s;
  background: 
    linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB,#000);
  background-size: 400% 400%;
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: 0 0;
}

h1:hover {
  background-position: 100% 50%;
  
}

<h1>The Title</h1>

Answer 3

Answer №2

Before implementing transitions, it is crucial to establish the initial state of the element properties that will be altered.

h1 {
  background: black;
  -webkit-background-clip: text;
  background-clip: text;
}

I came across an intriguing example with a similar effect to yours. https://codepen.io/anthony-liddle/pen/uFoxA

Answer 4

Before implementing transitions, it is crucial to establish the initial state of the element properties that will be altered.

h1 {
  background: black;
  -webkit-background-clip: text;
  background-clip: text;
}

I came across an intriguing example with a similar effect to yours. https://codepen.io/anthony-liddle/pen/uFoxA

The CSS hover effect for text backgrounds is acting unexpectedly when the mouse moves away

Answer №1

Answer №2

Similar questions

javascript how to retrieve the custom attribute value of an HTML style

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

Bootstrap's ability to display panels of equal height across multiple rows is a game

Scrollbars behaving differently across browsers

Mobile responsiveness issue with menu not functioning as expected

What is the best way to format text within the _e() function in WordPress?

CSS for Positioning Elements Side by Side Using Absolute Positioning

CSS: Card elevates when keyboard is activated on a mobile device

Scrollbar styling functions flawlessly on Chrome and Safari, but encounters issues on Mozilla Firefox

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

Is there a way to style alternate iframes using CSS?

Tips for eliminating excessive spacing between words to achieve justified alignment on a mobile device

The impact of adjusting the article's margin-top on the margin-top of

Do overlay elements have to be positioned at the bottom of the HTML body every time?

Apply a specific style to the initial element generated by *ngFor

Mismatched heights of grid elements