CSS анимация и анимация: hover

Question

Я хочу, чтобы анимация начала загружалась, а затем включалась: наведите курсор, чтобы добавить другую анимацию.Проблема в том, что после того, как я оставляю элемент (не зависший), он возвращается к своей первой анимации и повторяет ее.

Есть ли способ избежать этого?

Проблемное видео: https://youtu.be/uCZdo4FsCj8

Код:

    .char {
    animation: slide-down 2s forwards cubic-bezier(0, 1.18, .82, 1.02);
    animation-delay: calc(0s + (0.1s * var(--char-index)));
    animation-iteration-count: 1;
    opacity: 1;


    @keyframes slide-down {
        from {
            transform: translate(-125%, 125%);
            opacity: 1;
        }

        to {
            transform: translate(0%);
            opacity: 1;
        }
    }

    &:hover {
        animation: newAnim 0.4s forwards linear;
        color: red;


        @keyframes newAnim {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.2);
            }

        }
    }

}

Answer 1

Рассматривали ли вы использование анимации только для начального движения и переходов для эффекта :hover?Таким образом, animation-iteration-count не сбрасывается после наведения.По существу добавьте следующий код CSS:

.char {
  ...your animations for initial loading

  transition: color 0.4s linear, transform 0.4s linear;
}


.char:hover {
  transform: scale(1.2); 
  color: red;
}

Пример такого решения можно найти в этом codepen .

Answer 2

Вы не можете сделать это без использования JavaScript.Когда :hover происходит, animation-iteration-count сбрасывается.Это, в свою очередь, приводит к повторению первой анимации после отпускания зависания.Поэтому вам нужно будет использовать JavaScript, чтобы он заработал.