Question

我想创建一个按钮（仅使用css和html），通过在其最下方的轴上旋转，在悬停下方显示另一个按钮。

我一直很成功：http://codepen.io/machinarius/pen/BdtCb

但是你可以在我的笔上看到悬停行为充其量只是片状，它会在光标移动时重置动画。为什么要发生这种情况？一旦选择器关闭，Isn＆＃t; t -webkit-animation-fill-mode: both;是否应该反转动画？

Answer 1

问题在于您是在:hover伪类上应用动画。动画发生后，您不再悬停，因此动画会重置。尝试围绕动画元素包装容器类，并将动画触发器应用到容器的:hover，如https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode上的示例所示。

Answer 2

这个问题似乎有两个部分：

为什么徘徊片状？

就像帕尔帕蒂说的那样，只要unfold-button徘徊在它上面，它就会跳开，所以你需要有一个不动的元素来捕捉你的徘徊而不会徘徊。所以让我们添加一个div来执行此操作：

<div class="container">
  <div class="unfold-button orange">
    Hello World
  </div>
</div>

同样，让我们相应地更新CSS选择器：

.container:hover .unfold-button {

现在，如果你把它放在你的HTML中，你会发现悬停不再是片状的。但是，如您所述，它仍然没有动画回原位。这将我们带到第二个问题：

为什么动画没有反转？

实际上，animation-fill-mode并不意味着当动画不再分配时动画将反转;它只确定在动画发生之前和之后“填写”的属性。如果删除定义animation-fill-mode的行，您将看到唯一的区别是，没有它，动画将在完成后恢复。

此外，元素没有他们曾经拥有的animation值的内存，因此只要元素的animation属性发生更改，元素就会立即“弹出”到指定的内容中。不受任何先前animation值的影响。

因此，你的CSS实际发生的事情是，当unfold-button悬停在它上面时，会传递unfold动画并播放它（就像它应该的那样），但是当它是没有徘徊，它突然没有分配动画，因此“忘记”了动画，它只是回到最初分配的内容。

考虑到unfold动画是一个简单的动作，我建议将其表示为过渡：

.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);
}

请注意在悬停状态和非悬停状态下如何维护transition属性。与animation一样，没有动画就会立即出现。

你有它！

如果HTML和CSS看起来就像我现在坐在我面前的那样，一切都应该是好的。

这里有关于在悬停时反转CSS动画的更多信息：
How to make CSS Animation reverse on hover-out?

为什么CSS Hover行为片状？

2 个答案:

为什么徘徊片状？

为什么动画没有反转？

你有它！