Currently working on a website and encountering a bug as demonstrated in this example.
The issue I'm facing is with the footer behavior - it should move up on hover and return to its original position on mouse-out. However, if I move the mouse to where the footer moved after going up, it automatically goes back up without the smooth transition effect.
It's difficult to explain this in simpler terms, so if anyone understands the problem and knows how to fix it, I would greatly appreciate your help!
Here is the code snippet:
html, body{
height: 100%;
}
.x{
width:100%;
min-height: 100%;
background-color: #000;
color: #FFF;
}
.y{
background-color: #ABC;
width: 100%;
text-align: left;
position: fixed;
bottom:-50px;
height: 100px;
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-ms-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in;
}
.y:hover{
-webkit-transition: ease;
-moz-transition: ease;
-ms-transition: ease;
-o-transition: ease;
transition: ease;
-webkit-transform: translate(0px,-100px);
-moz-transform: translate(0px,-100px);
-ms-transform: translate(0px,-100px);
-o-transform: translate(0px,-100px);
transform: translate(0px,-100px);
}<body>
<div class="x"> x
</div>
<div class="y"> y
</div>
</body>