CSS动画和动画上：悬停

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

不使用JavaScript你不能做到这一点。当:hover发生时，animation-iteration-count被重置。这反过来又导致第一动画让徘徊去后重复。所以，你将不得不使用一些JavaScript得到它的工作。

Answer 2

你有没有使用动画只是初始运动考虑，并为:hover效果转变？这样一来，animation-iteration-count不unhovering后复位。本质上添加下面的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找到。