Эффект наведения фона текста CSS странно ведет себя при наведении курсора мыши
Я реализовал эффект наведения на элемент h1 (см. Код и перо ниже), но эффект странно ведет себя при отключении мыши и как бы мерцает, прежде чем вернуться в исходное состояние.
Есть идеи, как заставить его вернуться к исходному цвету так же плавно, как он исчезает при наведении?
Заранее спасибо.
https://codepen.io/lobodemon/pen/YOXKNJ
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>
Ответы 2
Когда вы работаете с переходом, вам необходимо установить начальное состояние свойств элемента, которые вы собираетесь изменить.
h1 {
background: black;
-webkit-background-clip: text;
background-clip: text;
}
Я также нашел интересный пример с таким же эффектом, как и ваш. https://codepen.io/anthony-liddle/pen/uFoxA
Спасибо за ответ - хотя в приведенном вами примере кажется, что фон просто перемещается при наведении курсора, а не добавляется / удаляется. Также установка начальных значений на h1, похоже, не имела никакого эффекта :(
Проблема в том, что вы пытаетесь объединить анимацию с переходом, но это не сработает так, как вы ожидаете. Добавляя переход, вы не сделаете анимацию плавной. Другими словами, в анимацию нельзя добавить переход.
Поскольку вы сделали продолжительность анимации 15s при наведении, я не думаю, что в этом случае требуется бесконечность, потому что никто не будет зависать дольше, чем 15s, поэтому вы можете изменить это на переход, и он будет плавным.
Я добавил черный цвет к градиенту, чтобы получить наше начальное состояние, затем с переходом мы можем сделать половину начальной анимации, и в конце у вас будет продолжительность 7s, которой почему-то достаточно для эффекта наведения:
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>
Я не уверен, как это отвечает на вопрос и почему он получил 2 положительных голоса?