CSS - Animate css settings back and forth

Question

If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.

.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }

.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

<div class="container">
  <div class="subcontainer">

  </div>
</div>

How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.

Fabrizio Calderan · Accepted Answer · 2020-01-21 13:49:10Z

3

You need a transition defined in the .subcontainer instead of an animation

.container { 
    position: relative; 
    background: black; 
    width: 200px; height: 200px; }

.subcontainer { 
    position: absolute; 
    bottom: 10px; width: 100%; height: 20px; 
    background: red; 
    transition: background 2s 0s }

.container:hover .subcontainer { background: yellow;  }

<div class="container">
  <div class="subcontainer">

  </div>
</div>

answered Jan 21, 2020 at 13:49

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Black Over a year ago

Why do you add the background to transition though? I noticed it does also work if you remove it.

Fabrizio Calderan Over a year ago

if you remove the property then the transition will occur on every property you change on hover

Collectives™ on Stack Overflow

CSS - Animate css settings back and forth

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related