CSS 不同的悬停动画（CSS Zen Garden 示例）

Question

刚刚在 http://csszengarden.com/219/ 上看到这个仅 CSS 的动画，想重新创建动画，当您将鼠标悬停在中间卡片上时即开始，即

通常网站会提供 CSS 样式表，但在这个例子中我找不到。

悬停动画部分只是先平移y轴再改变视角的动画。

我的问题是我真的不知道这个动画的悬停部分是如何工作的，因为首先卡片必须保持悬停动画的结束状态，然后它首先在 y 轴上平移，然后它缩小，因此它不是悬停的反转动画。

它尝试了from和to的关键帧方法。这种方法可以在悬停的正确结束状态开始取消悬停动画，但它只能处理单个动画而不是连续的动画。此外，使用 from 和 to 时，当您在动画结束前悬停时，动画会跳转。

这是我目前所知道的。

.parent {
  height: 1000px;
  width: 1000px;
  position: relative;
}

.child {
  height: 40px;
  width: 40px;
  left: 40%;
  border: medium solid black;
  position: absolute;
}

.parent:hover .child{
  animation: 3s in forwards;
}

@keyframes in {
  50% {
    transform: translate3d(0px, 100px, 0px);
  }
  100% {
    transform: perspective(500px) translate3d(0px, 100px, 100px);
  }
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 1

在 :hover 上更改了多个样式属性。 transition 属性可以有像 transition: property duration timing delay 这样的延迟值。在您的示例中，某些属性有延迟，而有些则没有，因此看起来发生了多个转换。下面是更改 div 的 left 和 top 的示例。 left属性有1秒的延迟，top没有延迟。

.banner {
  transition: top 1s linear, left 1s linear 1s;
  /*when hovered, move 100 down, after 1s move 100 right*/
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 150px;
  background-color: coral;
}

.banner:hover {
  top: 100px;
  left: 100px;
}


/*this is needed so you don't get flickering*/

.banner::before {
  content: '';
  height: 100px;
  width: 100%;
  position: absolute;
  top: -100px;
  left: 0;
}

<div class="banner">Hello Whosebug!</div>

CSS 不同的悬停动画（CSS Zen Garden 示例）

CSS different unhover animation (CSS Zen Garden Example)

css

css-animations