CODEWITHSUNDEEP
csscss-animations
Black
Black

Reputation: 20232

CSS - Animate css settings back and forth

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.

Upvotes: 1

Views: 236

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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>

Upvotes: 3

Related Questions