第二次悬停在某个对象上时，有什么方法可以触发不同的动画吗？

Question

我想第二次悬停在元素上时触发不同的动画，所以第一次会触发正常动画，但第二次悬停时会触发不同的动画

.star:hover{
    animation: myAnim 2s ease 0s 1 normal forwards;
}

Answer 1

我不确定这是否是您真正需要的，但我在我的网站中使用了它：

    .star{
        transition: 0s background-color;
    }
    .star:hover{
        background-color:red;    
        transition-delay:1s;
    }

Answer 2

您可以在第二个动画触发元素的正上方使用与第一个动画触发器大小相同的绝对定位叠加元素来做到这一点。

通过将元素的最大高度设置为 0 使第一个动画结束。

下次将鼠标悬停在该区域上时，将触发下方元素的动画。

HTML

<div class="container">
  <div class="star-first">1st trigger</div>
  <div class="star-second">2nd trigger</div>
 </div>

CSS 没有定义动画：

.container {
  position; relative;
  width: 50px;
  height: 50px;
}

.container div {
  width: 100%;
  height: 100%;
}

.star-first {
  position: absolute;
}

.star-first:hover {
  animation: animation1 .... forwards; // set max-height: 0 at that animations end
}

.star-second:hover  {
  animation: animation2 ....;
}

第二次悬停在某个对象上时，有什么方法可以触发不同的动画吗？

Is there any way to trigger a different animation when hover for the second time on an object?

html

css

hover

css-animations