How to call two animations in an element that uses ":Hover"?

Question

I have the following code:

body {
  margin: 0;
  padding: 0;
  background: #885053;
}

#hide {
  width: 100%;
  height: 0px;
  background: #fe5f55;
  margin: 0 auto;
  -webkit-animation: hideSlideDown 0.5s forwards;  
  animation: hideSlideDown 0.5s forwards;

}

#tudo {
  width: 100%;
  height: 500px;
  background: red;
}

#headbar {
  width: 100%;
  height: 254px;
  background: green;
}

#btnmenu {
  position: absolute;
  width: 100px;
  height: 30px;
  background: #FFF;
  left: 50%;
  top: 0%;
  text-align: center;
  border-radius: 0px 0px 10px 10px;
}

#btnmenu:hover{
  -webkit-animation: slide 0.5s forwards;  
  animation: slide 0.5s forwards;

}

@-webkit-keyframes hideSlideDown {
  from {
    height: 0px;
  }
  to {
    height: 265px;
  }
}

@keyframes hideSlideDown {
  from {
    top: 0%;
  }
  to {
    top: 45%;
  }
}

@-webkit-keyframes slide {
  from {
    top: 0%;
  }
  to {
    top: 45%;
  }
}

@keyframes slide {
  from {
    top: 0%;
  }
  to {
    top: 45%;
  }
}

<div id="tudo">
  <div id="head">
    <div id="hide">

    </div>
    <div id="btnmenu">
      <span>Menu</span>
    </div>
    <div id="headbar">    
    </div>    
  </div>    
</div>

I’m trying to do the div #Hide follow the button to the center of the page by pointing to the button, but I don’t know what’s going wrong.

Answer 1

I made an example to solve just what you need

.hover-container {
  width: 100%;
  height: 120px;
  background: #191d20;
  display: inline-block;
}

.child1 {
  width: 20px;
  height: 80px;
  background: #197117;
  margin: 20px;
  transition: all .5s ease-out;
}

.child2 {
  width: 20px;
  height: 80px;
  background: rgb(246,131,32);
  margin: 20px;
  transition: all .5s ease-out;
}

.hover-container:hover .child1 {
  background: rgb(246,131,32);
}

.hover-container:hover .child2 {
  background: #197117;
}

<div class="hover-container">
  <div class="child1"><div>
  <div class="child2"><div>
</div>

Answer 2

Her "hideSlideDown" animation will not work properly as it has two distinct statements. To animate the button you can use Transition which is simpler in this case.

If you want two animations in the Hover state of an element use only one animation with properties and values in keyframes distinct (10%, 35%, 75%) rather than using "from" and "to", which are equivalent to 0% and 100% .