How can I make a child element grow and shrink with animation on hover using CSS?

Question

i have a problem, when i hover on .wrapper__shopcart element its child element .wrapper__shopcart-modal will show up with animation:

@keyframes Growth{
     from{
           transform: scale(0);
           opacity: 0;
     }
     to {
           transform: scale(1);
           opacity: 1;
     }
}

and when the hover is over i want it to disappear with the animation:

@keyframes Shrink{
     from {
          transform: scale(1);
          opacity: 1;
     }
     to {
          transform: scale(0);
          opacity: 0;
     }
}

but I don't know how. I wish an efficient css method for this problem

Answer 1

If you want this to happen on hover you need to use a transition, not a keyframe animation. See the below example.

Also keep in mind that when it shrinks down to scale(0) that you really cannot "hover" over nothing any more so that animations might look odd if you move your mouse around.

Example #1

#container {
  display: flex;
}

.grow-shrink {
  background: #EEE;
  border: 1px solid lightblue;
  padding: 10px 15px;
  
  opacity: 1;
  transform: scale(1);
  
  /*Tell this element which properties to animate if something changes
  We are saying all properties will animate when changed for 0.3 seconds*/
  transition: all 0.3s;
}

.grow-shrink:hover {
  transform: scale(0);
  opacity: 0;
}

<div id="container">
  <div class="grow-shrink">one</div>
  <div class="grow-shrink">two</div>
  <div class="grow-shrink">three</div>
  <div class="grow-shrink">four</div>
  <div class="grow-shrink">five</div>
</div>

Here's a way around that jerky animation though. Each element has a wrapping element. We hover over that one and only scale down the inner one.

Example #2

#container {
  display: flex;
}

.grow-shrink-wrapper .grow-shrink {
  background: #EEE;
  border: 1px solid lightblue;
  padding: 10px 15px;
  
  opacity: 1;
  transform: scale(1);
  
  /*Tell this element which properties to animate if something changes
  We are saying all properties will animate when changed for 0.3 seconds*/
  transition: all 0.3s;
}

.grow-shrink-wrapper:hover .grow-shrink {
  transform: scale(0);
  opacity: 0;
}

<div id="container">
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">one</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">two</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">three</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">four</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">five</div>
  </div>
</div>

Example #3

And here's a 3rd example that switches the starting and ending states based on comments below.

#container {
  display: flex;
  border: 1px solid red;
}

.grow-shrink-wrapper .grow-shrink {
  background: #EEE;
  border: 1px solid lightblue;
  padding: 10px 15px;
  
  opacity: 0;
  transform: scale(0);
  
  /*Tell this element which properties to animate if something changes
  We are saying all properties will animate when changed for 0.3 seconds*/
  transition: all 0.3s;
}

.grow-shrink-wrapper:hover .grow-shrink {
  transform: scale(1);
  opacity: 1;
}

<div id="container">
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">one</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">two</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">three</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">four</div>
  </div>
  <div class="grow-shrink-wrapper">
    <div class="grow-shrink">five</div>
  </div>
</div>