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

I want to trigger a different animation when I hover over the element for a second time, so the first time would trigger a normal animation, but trigger a different one when hover for a second time

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

CodePudding user response：

You could do that with an absolute positioned overlay element of the same size as 1st animation trigger right above the 2nd animation triggering element.

Make that 1st animation end with setting that elements max-height to 0.

Next time hovering over that area, the animation of the lower element will fire.

HTML

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

CSS without animations defined:

.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 ....;
}

CodePudding user response：

I'm not sure if this is what you exactly need, but I used this in my Website:

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