Make CSS animations fade out when "un-hovered"

[SilverSerpent]

Hello,

I have this simple test pen that simply changes the boxes hue when hovered. However, you will notice that if you “un-hover” in the middle of the animation it goes back to the original state immediately. Is there a way to make the animation complete when un-hovered?

[Historical Forums User]

write below code also

.container .box {
-webkit-transition: anim 5s ease-out;   
}

[Paulie_D]

Why do you have an animation AND a transition? I’m sure it’s right but how is it supposed to work?

Anyway…since the animation is only linked to the hover state it naturally won’t apply when unhovered.

I’m a little confused as to what it is you are trying to achieve.

[SilverSerpent]

Thanks for the suggestion abhi7 but that did not work. Paulie, what I am trying to do is make the box so that when unhovered, it does not immediately jump back to red, it finishes the animation and then stops. I am using the animation because I want this to loop while hovered, and I thought maybe if I had a transition applied to the hover state that once it was unhovered the transition would take effect and transition from the current hue-rotation value to red.

[Historical Forums User]

Can you have a try of the following, May be this code will serve your purpose.

<div class="box">
  Box
</div>

.box {
    background: #8ec63f;
    transition-property: background;
    transition-duration: 5s;
    transition-timing-function: linear;
     width:50px;
     height:50px;
     text-align:center;

    }
    .box:hover {
    background: #f7941d;
    }

[SilverSerpent]

That’s not exactly what I want though, I just used the box as an example but for the actual project I am working on I have a multicolored logo that I need to use hue-rotate on to achieve the color cycle effect. Also, in your example the box would go from on background to the other on hover, and then stay there until unhovered. What I am looking for is for the box to start at red and through all the hues until it get back to red continuously. As long as it is hovered, it should keep looping through all hues. However, if it is unhovered in the middle of cycling hues it should finish cycling until it gets back to red before stopping (or alternatively just transition back to red). This may be something that requires Javascript to get to work.

[Historical Forums User]

<div class="box"></div>
.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  left: 0;
 }

.box:hover {
 animation:anim 5s;
-webkit-animation:anim 5s;
animation-iteration-count:infinite;
}

@keyframes anim {
  from { background:red;}
  to {background:blue;}

}

@-webkit-keyframes anim {
  from { background:red;}
  to {background:blue;}
}

[Paulie_D]

I’m thinking that a JS/JQ solution would be best.

[SilverSerpent]

That’s what I’m thinking as well, thanks!

[Author]

Posts