Why is CSS Hover behaviour flaky? - css

Question

I want to create a button (using only css and html) that reveals another button beneath it on hover by rotating on it's lowermost axis.
I've been mostly successful: http://codepen.io/machinarius/pen/BdtCb
But as you can see on my pen the hover behaviour is flaky at best, it resets the animation on any movement of the cursor. Why id that happening? Isn't -webkit-animation-fill-mode: both; supposed to reverse the animation once the selector goes off?

Answer 1

There seem to be two parts to this question:
Why is the hovering flaky?
Like Palpatim said, as soon as the unfold-button is hovered over, it jumps away, so you'll need to have an unmoving element that will catch your hovers without un-hovering itself. So let's add a div that will do this:
<div class="container">
<div class="unfold-button orange">
Hello World
</div>
</div>
Likewise, let's update the CSS selector accordingly:
.container:hover .unfold-button {
Now if you put that in your HTML, you'll see that the hovering is no longer flaky. However, as you described, it still isn't animating back into place. This brings us to our second question:
Why is the animation not reversing?
Actually, animation-fill-mode does not mean that the animation will reverse back when the animation is no longer assigned; it only determines what attributes "fill out" before and after the animation occurs. If you remove the line defining animation-fill-mode, you'll see that the only difference is that, without it, the animation reverts after completing.
Also, elements have no memory of the animation values that they used to have, so as soon as an element's animation attribute changes, the element immediately "pops" into what it is assigned to be with no influence from any previous values of animation.
As a result, what's actually happening with your CSS is that, when the unfold-button is hovered over, it is handed the unfold animation and plays it (like it should), but when it is un-hovered, it suddenly has no animation assigned, so having "forgotten" about the animation, it just snaps back to what it was originally assigned to be.
Considering that the unfold animation is one simple motion, I would recommend expressing it instead as a transition:
.unfold-button {
/* ... */
border-style: none;
box-sizing: border-box;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-webkit-transition: 0.5s;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
.container:hover .unfold-button {
-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
Note how the transition attribute is maintained throughout both the hovered and non-hovered states. Like with animation, no animation results from it without its immediate presence.
And there you have it!
If the HTML and CSS look like what I have sitting in front of me right now, all should be good.
There's a little bit more information about reversing a CSS animation on hover-out here:
How to make CSS Animation reverse on hover-out?

Answer 2

The problem is that you're applying your animation on the :hover pseudo-class. Once the animation happens, you're no longer hovering, and so the animation resets. Try wrapping a container class around your animation element, and applying your animation trigger to the container's :hover, as in the example on https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode.