CSS 不同的悬停动画(CSS Zen Garden Example)

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 Stackoverflow!</div>