How to draw two animations on an element using ": hover"?

Question

How to draw two animations on an element using ": hover"?

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

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 make the div #hide follow the button to the center of the page by pointing to the button, but I do not know what's going wrong.

css

asked by anonymous 10.06.2015 / 01:08

2 answers

Gulp task does not run (but turns callback) Ajax saving dynamically

score 1 · Answer 1

I've set 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>

score 0 · Answer 2

Your "hideSlideDown" animation will not work properly because it has two distinct declarations. 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%) instead of using "from" and "to", which are equivalent to 0% and 100%.