Как скрыть бесконечную циклическую анимацию изменения цвета фона, без сброса к начальному кадру при отведении с элемента?

Question

Как сделать, что бы цикл бесконечной анимация смены цвета фона продолжалась "в скрытом режиме" когда убраешь мышку с элемента, и возобновлялся с того места где находится в данный момент цикл.

Хочется сделать также как на сайте https://stripe.dev, при наведении мышку на элемент в таблице появляется фон с перебором цветов, когда мышку убираешь, фон исчезает, но цикл смены цвета не прекращается, когда мышку вновь наводишь на элемент, цвет фона появляется с места где находится цикл.

Может это надо делать с помощью JS, но я не знаю данный язык вообще, просьба помочь.

@property --hue {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}
@keyframes rainbow {
    from { --hue: 0; }
    to { --hue: 360; }
}
.my-anim:hover {
    --hue: 0;
    animation: rainbow 36000ms linear infinite;
    background-color: hsl(var(--hue) 80% 70%);
}

<div class="my-anim">Наведите на меня курсор</div>

Answer 1

Вам не нужно запускать анимацию при :hover.

@property --hue {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}
@keyframes rainbow {
    from { --hue: 0; }
    to { --hue: 360; }
}
.my-anim {
    --hue: 0;
    animation: rainbow 36000ms linear infinite;
}
.my-anim:hover {
    background-color: hsl(var(--hue) 80% 70%);
}

<div class="my-anim">Наведите на меня курсор</div>

БЛОГ НА HUSL

Как скрыть бесконечную циклическую анимацию изменения цвета фона, без сброса к начальному кадру при отведении с элемента?

Ответы (1 шт):